feat: loading states adding to lender profile sections (#5451)

kiva · Aug 20, 2024 · c17e0fd · c17e0fd
1 parent 6d194b5
commit c17e0fd
Show file tree

Hide file tree

Showing 8 changed files with 378 additions and 246 deletions.
diff --git a/src/components/LenderProfile/AsyncLenderSection.vue b/src/components/LenderProfile/AsyncLenderSection.vue
@@ -0,0 +1,17 @@
+<template>
+	<section>
+		<slot></slot>
+	</section>
+</template>
+
+<script>
+import delayUntilVisibleMixin from '@/plugins/delay-until-visible-mixin';
+
+export default {
+	name: 'AsyncLenderSection',
+	mixins: [delayUntilVisibleMixin],
+	mounted() {
+		this.delayUntilVisible(entry => this.$emit('visible', entry));
+	},
+};
+</script>
diff --git a/src/components/LenderProfile/LenderBadges.vue b/src/components/LenderProfile/LenderBadges.vue
@@ -1,22 +1,37 @@
 <template>
-	<section v-if="completedAchievements.length > 0">
-		<h4>{{ badgesTitle }}</h4>
-		<badges-list
-			class="tw-my-4"
-			:completed-achievements="completedAchievements"
-			:total-possible-badges="totalPossibleBadges"
-			:is-loading="isLoading"
-		/>
-	</section>
+	<async-lender-section @visible="() => isLoading = false">
+		<section v-if="completedAchievements.length > 0">
+			<h4
+				v-if="!isLoading"
+				class="data-hj-suppress"
+			>
+				{{ badgesTitle }}
+			</h4>
+			<kv-loading-placeholder
+				v-else
+				style="height: 30px; width: 250px;"
+			/>
+			<badges-list
+				class="tw-my-4"
+				:completed-achievements="completedAchievements"
+				:total-possible-badges="totalPossibleBadges"
+				:is-loading="isLoading"
+			/>
+		</section>
+	</async-lender-section>
 </template>
 
 <script>
 import BadgesList from '@/pages/Portfolio/LendingStats/BadgesList';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
+import AsyncLenderSection from './AsyncLenderSection';
 
 export default {
 	name: 'LenderBadges',
 	components: {
-		BadgesList
+		BadgesList,
+		KvLoadingPlaceholder,
+		AsyncLenderSection,
 	},
 	props: {
 		completedAchievements: {
@@ -30,12 +45,14 @@ export default {
 		lenderInfo: {
 			type: Object,
 			default: () => ({})
-		}
+		},
+	},
+	data() {
+		return {
+			isLoading: true
+		};
 	},
 	computed: {
-		isLoading() {
-			return this.totalPossibleBadges === 0;
-		},
 		lenderName() {
 			return this.lenderInfo?.name ?? '';
 		},

diff --git a/src/components/LenderProfile/LenderDedicationsList.vue b/src/components/LenderProfile/LenderDedicationsList.vue
@@ -1,41 +1,55 @@
 <template>
-	<section v-if="lenderDedications.length > 0" class="tw-my-8" id="lender-dedications">
-		<h4 class="data-hj-suppress tw-mb-1">
-			{{ lenderDedicationsTitle }}
-		</h4>
-		<p class="tw-mb-2">
-			{{ showedDedications }}
-		</p>
+	<async-lender-section @visible="fetchLenderDedications">
+		<section v-if="lenderDedications.length > 0" class="tw-my-8" id="lender-dedications">
+			<div v-if="!isLoading">
+				<h4 class="data-hj-suppress tw-mb-1">
+					{{ lenderDedicationsTitle }}
+				</h4>
+				<p class="tw-mb-2">
+					{{ showedDedications }}
+				</p>
+			</div>
+			<kv-loading-placeholder
+				v-else
+				class="tw-mb-2"
+				style="height: 55px; width: 250px;"
+			/>
 
-		<div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-4 lg:tw-grid-cols-6 tw-gap-4">
-			<div
-				v-for="dedication in lenderDedications"
-				:key="`dedication-${dedication.id}`"
-				class="tw-flex tw-flex-col tw-gap-0.5"
-			>
-				<a
-					:href="`/dedication/${dedication.loanId}`"
-				>
-					<dedicate-heart class="tw-w-full tw-px-4 tw-fill-brand" />
-				</a>
-				<a
-					:href="`/dedication/${dedication.loanId}`"
-					class="data-hj-suppress"
+			<div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-4 lg:tw-grid-cols-6 tw-gap-4">
+				<div
+					v-for="(dedication, index) in lenderDedications"
+					:key="`dedication-${dedication.id}-${index}`"
+					class="tw-flex tw-flex-col tw-gap-0.5"
 				>
-					Dedicated by {{ dedication.senderName }}
-				</a>
+					<div v-if="!dedication.id">
+						<kv-loading-placeholder class="tw-w-full tw-aspect-square" />
+					</div>
+					<div v-else>
+						<a
+							:href="`/dedication/${dedication.loanId}`"
+						>
+							<dedicate-heart class="tw-w-full tw-px-4 tw-fill-brand" />
+						</a>
+						<a
+							:href="`/dedication/${dedication.loanId}`"
+							class="data-hj-suppress"
+						>
+							Dedicated by {{ dedication.senderName }}
+						</a>
+					</div>
+				</div>
 			</div>
-		</div>
-		<kv-pagination
-			class="tw-mt-4"
-			v-if="totalCount > dedicationsLimit"
-			:limit="dedicationsLimit"
-			:total="totalCount"
-			:offset="dedicationsOffset"
-			:scroll-to-top="false"
-			@page-changed="pageChange"
-		/>
-	</section>
+			<kv-pagination
+				class="tw-mt-4"
+				v-if="totalCount > dedicationsLimit"
+				:limit="dedicationsLimit"
+				:total="totalCount"
+				:offset="dedicationsOffset"
+				:scroll-to-top="false"
+				@page-changed="pageChange"
+			/>
+		</section>
+	</async-lender-section>
 </template>
 
 <script>
@@ -48,6 +62,8 @@ import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 import lenderDedicationsQuery from '@/graphql/query/lenderDedications.graphql';
 import DedicateHeart from '@/assets/icons/inline/dedicate-heart.svg';
 import KvPagination from '~/@kiva/kv-components/vue/KvPagination';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
+import AsyncLenderSection from './AsyncLenderSection';
 
 export default {
 	name: 'LenderDedicationsList',
@@ -56,6 +72,8 @@ export default {
 	components: {
 		KvPagination,
 		DedicateHeart,
+		KvLoadingPlaceholder,
+		AsyncLenderSection
 	},
 	props: {
 		publicId: {
@@ -69,12 +87,13 @@ export default {
 	},
 	data() {
 		return {
-			lenderDedications: [],
+			lenderDedications: new Array(6).fill({ id: 0 }),
 			dedicationsLimit: 12,
 			dedicationsOffset: 0,
 			totalCount: 0,
 			pageQuery: { dedications: '1' },
 			mdiAccountCircle,
+			isLoading: true,
 		};
 	},
 	computed: {
@@ -108,6 +127,7 @@ export default {
 
 				this.lenderDedications = data.community?.lender?.dedicationsReceived?.values ?? [];
 				this.totalCount = data.community?.lender?.dedicationsReceived?.totalCount ?? 0;
+				this.isLoading = false;
 			} catch (e) {
 				logReadQueryError(e, 'LenderDedicationsList lenderDedicationsQuery');
 			}
@@ -135,12 +155,9 @@ export default {
 			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
 		}
 	},
-	mounted() {
-		this.fetchLenderDedications();
-	},
 	created() {
 		this.pageQuery = _get(this.$route, 'query');
 		this.updateFromParams(this.pageQuery);
-	}
+	},
 };
 </script>