feat: loading states

n8n-io · Jan 17, 2022 · fe850c2 · fe850c2
1 parent 9554bd2
commit fe850c2
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 24 deletions.
diff --git a/packages/editor-ui/src/components/CollectionsCard.vue b/packages/editor-ui/src/components/CollectionsCard.vue
@@ -1,23 +1,46 @@
 <template>
 		<div :class="$style.collectionCard">
-			<n8n-heading :bold="true" size="medium">{{shortTitle}}</n8n-heading>
-			<footer :class="$style.cardFooter">
-				<slot name="footer"></slot>
-			</footer>
+			<div v-if="loading">
+				<el-skeleton :rows="6" :loading="loading" animated>
+					<template slot="template">
+						<el-skeleton-item variant="p" />
+						<el-skeleton-item variant="p" />
+						<el-skeleton-item variant="p" style="width: 60%;" />
+
+						<footer :class="$style.cardFooter">
+							<el-skeleton-item variant="text" style="width: 30%;" />
+							<el-skeleton-item variant="text" style="width: 30%;"/>
+						</footer>
+					</template>
+				</el-skeleton>
+			</div>
+			<div v-else>
+				<n8n-heading :bold="true" size="medium">{{shortTitle}}</n8n-heading>
+				<footer :class="$style.cardFooter">
+					<slot name="footer"></slot>
+				</footer>
+			</div>
 		</div>
 </template>
 
 <script lang="ts">
 
 import mixins from 'vue-typed-mixins';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
+import ElSkeleton from 'element-ui/lib/skeleton';
+import ElSkeletonItem from 'element-ui/lib/skeleton-item';
 
 export default mixins(
 	genericHelpers,
 ).extend({
 	name: 'CollectionsCard',
+	components: {
+		ElSkeleton,
+		ElSkeletonItem,
+	},
 	props: {
 		title: String,
+		loading: Boolean,
 	},
 	computed: {
 		shortTitle(): string {

diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/CollectionsCarousel.vue
@@ -2,7 +2,17 @@
 	<div>
 		<n8n-heading size="large">Collections ({{collectionsUI.length}})</n8n-heading>
 
-		<agile v-if="collectionsUI.length" :slidesToShow="3" :navButtons="true" :dots="false" :infinite="false">
+
+		<agile v-if="loading" :slidesToShow="3" :navButtons="true" :dots="false" :infinite="false">
+
+			<CollectionsCard :loading="loading" />
+			<CollectionsCard :loading="loading" />
+			<CollectionsCard :loading="loading" />
+			<CollectionsCard :loading="loading" />
+
+		</agile>
+
+		<agile v-else-if="collectionsUI.length" :slidesToShow="3" :navButtons="true" :dots="false" :infinite="false">
 
 			<CollectionsCard v-for="collection in collectionsUI" :key="collection.id" :title="collection.name">
 			  <template v-slot:footer>
@@ -55,6 +65,7 @@ export default mixins(
 	data() {
 		return {
 			collectionsUI: [],
+			loading: true,
 		};
 	},
 	computed: {
@@ -276,9 +287,9 @@ export default mixins(
 		collections(newCollections): void {
 			if (newCollections) {
 				this.$data.collectionsUI = newCollections;
+				this.$data.loading = false;
 			} else {
 				this.$data.collectionsUI = [];
-
 			}
 		},
 	},

diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
@@ -1,29 +1,57 @@
 <template>
-		<div :class="$style.templateCard" @mouseover="hover = true" @mouseleave="hover = false">
-			<div :class="$style.cardBody">
-				<n8n-heading :bold="true" size="medium">{{shortTitle}}</n8n-heading>
-				<footer :class="$style.cardFooter">
-					<slot name="footer"></slot>
-				</footer>
+		<div >
+			<div v-if="loading" :class="$style.templateCardLoading">
+				<el-skeleton :loading="loading" animated>
+					<template slot="template">
+						<div :class="$style.cardBodyLoading">
+							<el-skeleton-item variant="p" />
+
+							<footer :class="$style.cardFooterLoading">
+								<el-skeleton-item variant="text" style="width: 25%;" />
+							</footer>
+						</div>
+						<aside :class="$style.rightSlot">
+							<el-skeleton-item variant="text" />
+						</aside>
+					</template>
+				</el-skeleton>
+
+			</div>
+
+			<div v-else :class="$style.templateCard" @mouseover="hover = true" @mouseleave="hover = false">
+				<div :class="$style.cardBody">
+					<n8n-heading :bold="true" size="medium">{{shortTitle}}</n8n-heading>
+					<footer :class="$style.cardFooter">
+						<slot name="footer"></slot>
+					</footer>
+				</div>
+				<aside :class="$style.rightSlot">
+					<slot v-if="!hover" name="right"></slot>
+					<slot v-if="hover" name="rightHover"></slot>
+				</aside>
 			</div>
-			<aside :class="$style.rightSlot">
-				<slot v-if="!hover" name="right"></slot>
-				<slot v-if="hover" name="rightHover"></slot>
-			</aside>
 		</div>
+
 </template>
 
 <script lang="ts">
 
 import mixins from 'vue-typed-mixins';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
+import ElSkeletonItem from 'element-ui/lib/skeleton-item';
+import ElSkeleton from 'element-ui/lib/skeleton';
 
 export default mixins(
 	genericHelpers,
 ).extend({
 	name: 'TemplateCard',
+	components: {
+		ElSkeleton,
+		ElSkeletonItem,
+	},
 	props: {
 		title: String,
+		loading: Boolean,
 	},
 	data() {
 		return {
@@ -60,15 +88,50 @@ export default mixins(
 		flex-direction: column;
 		justify-content: space-around;
 
+		.cardFooter {
+			bottom: 16px;
+			width: 100%;
+			right: 24px;
+		}
+	}
+
+	.rightSlot {
+		top: 10px;
+	}
+
+}
+
+.templateCardLoading {
+	width: 100%;
+	min-height: 68px;
+	border-bottom: 1px solid #DBDFE7;
+	margin-right: 8px;
+	padding: 16px;
+
+	> div > div {
+			display: flex;
+			justify-content: space-between;
+
+		.cardBodyLoading {
+			width: 800px;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+
+			.cardFooterLoading {
+				margin-top: 10px;
+				width: 100%;
+				right: 24px;
+			}
+		}
+
 		.rightSlot {
 			top: 10px;
+			width: 100px;
 		}
 	}
-	.cardFooter {
-		bottom: 16px;
-		width: 100%;
-		right: 24px;
-	}
+
+
 }
 
 </style>
diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -1,7 +1,20 @@
 <template>
 	<div>
 		<n8n-heading size="small">{{$locale.baseText('templates.categoriesHeading')}}</n8n-heading>
-		<ul :class="$style.categoriesList">
+		<div v-if="loading" :class="$style.loadingList">
+			<el-skeleton :loading="loading" animated>
+				<template slot="template">
+					<el-skeleton-item variant="text" />
+					<el-skeleton-item variant="text" />
+					<el-skeleton-item variant="text" />
+					<el-skeleton-item variant="text" />
+					<el-skeleton-item variant="text" />
+				</template>
+			</el-skeleton>
+
+
+		</div>
+		<ul v-else :class="$style.categoriesList">
 			<li>
 				<el-checkbox
 					label="All Categories"
@@ -30,11 +43,17 @@
 import { ITemplateCategory } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
+import ElSkeleton from 'element-ui/lib/skeleton';
+import ElSkeletonItem from 'element-ui/lib/skeleton-item';
 
 export default mixins(
 	genericHelpers,
 ).extend({
 	name: 'TemplateFilters',
+	components: {
+		ElSkeleton,
+		ElSkeletonItem,
+	},
 	props: {
 		setCategories: { type: Function },
 	},
@@ -44,6 +63,7 @@ export default mixins(
 			collapsed: true,
 			sortedCategories: [] as ITemplateCategory[],
 			selected: [] as string[],
+			loading: true,
 		};
 	},
 	created() {
@@ -70,6 +90,7 @@ export default mixins(
 	watch: {
 		categories(newCategories) {
 			this.sortedCategories = newCategories;
+			this.loading = false;
 		},
 		collapsed(newState) {
 			if (!this.collapsed) {
@@ -134,4 +155,12 @@ export default mixins(
 	height: auto;
 }
 
+.loadingList {
+	padding-top: 12px;
+
+	 div {
+		margin-top: 8px;
+	}
+}
+
 </style>
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
@@ -1,10 +1,20 @@
 <template>
 	<div :class="$style.listWrapper">
 		<n8n-heading size="large">Workflows ({{workflowsUI.length}})</n8n-heading>
-		<div v-if="workflowsUI.length" id="infiniteList" :class="$style.listContainer">
+		<div v-if="loading" id="infiniteList" :class="$style.listContainer">
+			<div :class="$style.templateList">
+				<TemplateCard :loading="loading" title="" />
+				<TemplateCard :loading="loading" title="" />
+				<TemplateCard :loading="loading" title="" />
+				<TemplateCard :loading="loading" title="" />
+
+			</div>
+
+		</div>
+		<div v-else-if="workflowsUI.length" id="infiniteList" :class="$style.listContainer">
 			<div :class="$style.templateList">
 				<div v-for="workflow in workflowsUI" :key="workflow.id">
-					<TemplateCard :title="workflow.name">
+					<TemplateCard :title="workflow.name" :loading="false">
 
 					<template v-slot:right>
 						<div :class="$style.nodesContainer">
@@ -66,6 +76,7 @@ export default mixins(
 		return {
 			workflowsUI: [],
 			hover: false,
+			loading: true,
 		};
 	},
 	computed: {
@@ -76,6 +87,7 @@ export default mixins(
 	watch: {
 		workflows(newWorkflows) {
 			this.workflowsUI = newWorkflows;
+			this.loading = false;
 		},
 	},
 	methods: {

diff --git a/packages/editor-ui/src/vue-agile.d.ts b/packages/editor-ui/src/vue-agile.d.ts
@@ -1 +1,3 @@
 declare module 'vue-agile'
+declare module 'element-ui/lib/skeleton'
+declare module 'element-ui/lib/skeleton-item'