Merge pull request #5012 from kiva/fix-education-loading-state-MARS-522

feat: prevent loading state while waiting for the post
kiva · Oct 5, 2023 · 3b4c2d5 · 3b4c2d5
2 parents 2a3b0e8 + fd57166
commit 3b4c2d5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 56 deletions.
diff --git a/src/pages/Portfolio/ImpactDashboard/EducationModule.vue b/src/pages/Portfolio/ImpactDashboard/EducationModule.vue
@@ -1,5 +1,5 @@
 <template>
-	<async-portfolio-section @visible="whenVisible" data-testid="education-module">
+	<async-portfolio-section data-testid="education-module">
 		<kv-grid class="tw-grid-cols-12 tw-items-center">
 			<div
 				class="tw-col-span-12 lg:tw-col-span-5 xl:tw-col-span-6 md:tw-items-start
@@ -17,14 +17,13 @@
 				</p>
 			</div>
 			<div class="tw-col-span-12 lg:tw-col-span-7 xl:tw-col-span-6">
-				<education-post :post="post" :loading="loading" />
+				<education-post :post="post" />
 			</div>
 		</kv-grid>
 	</async-portfolio-section>
 </template>
 
 <script>
-import { gql } from '@apollo/client';
 import AsyncPortfolioSection from './AsyncPortfolioSection';
 import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
 import EducationPost from './EducationPost';
@@ -33,47 +32,21 @@ const imageRequire = require.context('@/assets/images/', true);
 
 export default {
 	name: 'EducationModule',
-	inject: ['apollo'],
+	props: {
+		post: {
+			type: Object,
+			default: null,
+		},
+	},
 	components: {
 		AsyncPortfolioSection,
 		EducationPost,
 		KvGrid,
 	},
 	data() {
 		return {
-			loading: true,
-			loadingPromise: null,
-			post: null,
 			imageRequire,
 		};
 	},
-	methods: {
-		fetchAsyncData() {
-			if (this.loading && !this.loadingPromise) {
-				this.loadingPromise = this.apollo.query({
-					query: gql`query ContentfulBlogPosts (
-						$customFields: String,
-						$limit: Int
-					) {
-						contentful {
-							blogPosts: entries(contentType:"blogPost", customFields:$customFields, limit:$limit)
-						}
-					}`,
-					variables: {
-						customFields: 'metadata.tags.sys.id[in]=impact-page|order=-fields.originalPublishDate'
-					},
-				}).then(({ data }) => {
-					this.loading = false;
-					this.post = data?.contentful?.blogPosts?.items?.[0]?.fields ?? null;
-					this.$emit('hide-module', this.post === null);
-				}).finally(() => {
-					this.loadingPromise = null;
-				});
-			}
-		},
-		whenVisible() {
-			this.fetchAsyncData();
-		}
-	},
 };
 </script>
diff --git a/src/pages/Portfolio/ImpactDashboard/EducationPost.vue b/src/pages/Portfolio/ImpactDashboard/EducationPost.vue
@@ -1,7 +1,6 @@
 <template>
 	<div class="card-container">
 		<a
-			v-if="!loading"
 			:href="url"
 			class="card-container-link-image"
 			@click="trackEvent('blog-image')"
@@ -15,46 +14,36 @@
 				fallback-format="jpg"
 			/>
 		</a>
-		<kv-loading-placeholder v-else class="placeholder" :style="{ height: '16rem' }" />
 		<a
-			v-if="!loading"
 			:href="url"
 			@click="trackEvent('blog-headline')"
 			class="tw-text-h3 text-overflow tw-decoration-white tw-cursor-pointer"
 			:class="{ 'tw-line-clamp-2' : truncateHeadline }"
 		>
 			{{ headline }}
 		</a>
-		<kv-loading-placeholder v-else class="placeholder" :style="{ height: '2rem' }" />
 		<p
-			v-if="!loading" class="text-overflow tw-mt-0.5"
+			class="text-overflow tw-mt-0.5"
 			:class="{ 'tw-line-clamp-3 md:tw-line-clamp-4' : truncateSummary }"
 		>
 			{{ summary }}
 		</p>
-		<kv-loading-placeholder v-else class="placeholder" :style="{ height: '2rem' }" />
 	</div>
 </template>
 
 <script>
 import KvContentfulImg from '~/@kiva/kv-components/vue/KvContentfulImg';
-import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
 
 export default {
 	name: 'EducationPost',
 	components: {
 		KvContentfulImg,
-		KvLoadingPlaceholder
 	},
 	props: {
 		post: {
 			type: Object,
 			default: () => {}
 		},
-		loading: {
-			type: Boolean,
-			default: false,
-		}
 	},
 	data() {
 		return {
@@ -146,8 +135,4 @@ export default {
 .text-overflow {
 	@apply tw-text-white tw-overflow-hidden tw-text-ellipsis;
 }
-
-.placeholder {
-	@apply tw-w-full tw-mb-2;
-}
 </style>
diff --git a/src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue b/src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue
@@ -11,7 +11,7 @@
 					<lending-insights />
 					<recent-loans-list />
 					<your-donations />
-					<education-module v-if="showEdModule" @hide-module="hideModule" />
+					<education-module v-if="post" :post="post" />
 					<kiva-credit-stats />
 					<account-updates />
 					<your-teams />
@@ -26,6 +26,7 @@
 import WwwPage from '@/components/WwwFrame/WwwPage';
 import TheMyKivaSecondaryMenu from '@/components/WwwFrame/Menus/TheMyKivaSecondaryMenu';
 import ThePortfolioTertiaryMenu from '@/components/WwwFrame/Menus/ThePortfolioTertiaryMenu';
+import { gql } from '@apollo/client';
 import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
 import AccountOverview from './AccountOverview';
@@ -40,7 +41,7 @@ import YourDonations from './YourDonations';
 
 export default {
 	name: 'ImpactDashboardPage',
-	inject: ['cookieStore'],
+	inject: ['apollo', 'cookieStore'],
 	components: {
 		AccountOverview,
 		AccountUpdates,
@@ -59,13 +60,31 @@ export default {
 	},
 	data() {
 		return {
-			showEdModule: true
+			post: null
 		};
 	},
 	methods: {
-		hideModule(payload) {
-			this.showEdModule = !payload;
+		loadEducationPost() {
+			// Donation Education Module Experiment MARS-497
+			this.apollo.query({
+				query: gql`query ContentfulBlogPosts (
+						$customFields: String,
+						$limit: Int
+					) {
+						contentful {
+							blogPosts: entries(contentType:"blogPost", customFields:$customFields, limit:$limit)
+						}
+					}`,
+				variables: {
+					customFields: 'metadata.tags.sys.id[in]=impact-page|order=-fields.originalPublishDate'
+				},
+			}).then(({ data }) => {
+				this.post = data?.contentful?.blogPosts?.items?.[0]?.fields ?? null;
+			});
 		}
+	},
+	created() {
+		this.loadEducationPost();
 	}
 };
 </script>