diff --git a/src/components/LenderProfile/AsyncLenderSection.vue b/src/components/LenderProfile/AsyncLenderSection.vue
new file mode 100644
index 0000000000..3090b8abf5
--- /dev/null
+++ 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
index d8b8e4c494..515a311060 100644
--- 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
index 4041fa28e7..b014e88fb5 100644
--- 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>
diff --git a/src/components/LenderProfile/LenderInviteesList.vue b/src/components/LenderProfile/LenderInviteesList.vue
index ef40cc42e9..90da6a7715 100644
--- a/src/components/LenderProfile/LenderInviteesList.vue
+++ b/src/components/LenderProfile/LenderInviteesList.vue
@@ -1,56 +1,69 @@
 <template>
-	<section v-if="lenderInvitees.length > 0" class="tw-my-8" id="lender-invitees">
-		<h4 class="data-hj-suppress tw-mb-1">
-			{{ lenderInviteesTitle }}
-		</h4>
-		<p class="tw-mb-2">
-			{{ showedInvitees }}
-		</p>
-
-		<div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-4 lg:tw-grid-cols-6 tw-gap-4">
-			<div
-				v-for="invitee in lenderInvitees"
-				:key="`invitee-${invitee.id}`"
-				class="tw-flex tw-flex-col tw-gap-0.5"
-			>
-				<component
-					:is="!invitee.publicId ? 'span' : 'a'"
-					:href="`/lender/${invitee.publicId}`"
-				>
-					<kv-material-icon
-						v-if="!getImageUrl(invitee)"
-						:icon="mdiAccountCircle"
-						class="!tw-block tw-mx-auto tw-w-3/4"
-					/>
-					<img
-						v-else
-						:src="getImageUrl(invitee)"
-						style="width: 200px;"
-						class="tw-object-cover tw-aspect-square"
-					>
-				</component>
-				<component
-					class="data-hj-suppress"
-					:is="!invitee.publicId ? 'span' : 'a'"
-					:href="`/lender/${invitee.publicId}`"
-				>
-					{{ invitee.name }}
-				</component>
-				<p v-if="whereabouts(invitee)">
-					{{ whereabouts(invitee) }}
+	<async-lender-section @visible="fetchLenderInvitees">
+		<section v-if="lenderInvitees.length > 0" class="tw-my-8" id="lender-invitees">
+			<div v-if="!isLoading">
+				<h4 class="data-hj-suppress tw-mb-1">
+					{{ lenderInviteesTitle }}
+				</h4>
+				<p class="tw-mb-2">
+					{{ showedInvitees }}
 				</p>
 			</div>
-		</div>
-		<kv-pagination
-			class="tw-mt-4"
-			v-if="totalCount > inviteesLimit"
-			:limit="inviteesLimit"
-			:total="totalCount"
-			:offset="inviteesOffset"
-			:scroll-to-top="false"
-			@page-changed="pageChange"
-		/>
-	</section>
+			<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="(invitee, index) in lenderInvitees"
+					:key="`invitee-${invitee.id}-${index}`"
+					class="tw-flex tw-flex-col tw-gap-0.5"
+				>
+					<div v-if="!invitee.id">
+						<kv-loading-placeholder class="tw-w-full tw-aspect-square" />
+					</div>
+					<div v-else>
+						<component
+							:is="!invitee.publicId ? 'span' : 'a'"
+							:href="`/lender/${invitee.publicId}`"
+						>
+							<kv-material-icon
+								v-if="!getImageUrl(invitee)"
+								:icon="mdiAccountCircle"
+								class="!tw-block tw-mx-auto tw-w-3/4"
+							/>
+							<img
+								v-else
+								:src="getImageUrl(invitee)"
+								style="width: 200px;"
+								class="tw-object-cover tw-aspect-square"
+							>
+						</component>
+						<component
+							class="data-hj-suppress"
+							:is="!invitee.publicId ? 'span' : 'a'"
+							:href="`/lender/${invitee.publicId}`"
+						>
+							{{ invitee.name }}
+						</component>
+						<p v-if="whereabouts(invitee)">
+							{{ whereabouts(invitee) }}
+						</p>
+					</div>
+				</div>
+			</div>
+			<kv-pagination
+				class="tw-mt-4"
+				v-if="totalCount > inviteesLimit"
+				:limit="inviteesLimit"
+				:total="totalCount"
+				:offset="inviteesOffset"
+				:scroll-to-top="false"
+				@page-changed="pageChange"
+			/>
+		</section>
+	</async-lender-section>
 </template>
 
 <script>
@@ -63,6 +76,8 @@ import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 import lenderInviteesQuery from '@/graphql/query/lenderInvitees.graphql';
 import KvPagination from '~/@kiva/kv-components/vue/KvPagination';
 import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
+import AsyncLenderSection from './AsyncLenderSection';
 
 export default {
 	name: 'LenderInviteesList',
@@ -71,6 +86,8 @@ export default {
 	components: {
 		KvPagination,
 		KvMaterialIcon,
+		KvLoadingPlaceholder,
+		AsyncLenderSection,
 	},
 	props: {
 		publicId: {
@@ -84,12 +101,13 @@ export default {
 	},
 	data() {
 		return {
-			lenderInvitees: [],
+			lenderInvitees: new Array(6).fill({ id: 0 }),
 			inviteesLimit: 12,
 			inviteesOffset: 0,
 			totalCount: 0,
 			pageQuery: { invitees: '1' },
 			mdiAccountCircle,
+			isLoading: true,
 		};
 	},
 	computed: {
@@ -123,6 +141,7 @@ export default {
 
 				this.lenderInvitees = data.community?.lender?.invitees?.values ?? [];
 				this.totalCount = data.community?.lender?.invitees?.totalCount ?? 0;
+				this.isLoading = false;
 			} catch (e) {
 				logReadQueryError(e, 'LenderInviteesList lenderInviteesQuery');
 			}
@@ -156,12 +175,9 @@ export default {
 			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
 		}
 	},
-	mounted() {
-		this.fetchLenderInvitees();
-	},
 	created() {
 		this.pageQuery = _get(this.$route, 'query');
 		this.updateFromParams(this.pageQuery);
-	}
+	},
 };
 </script>
diff --git a/src/components/LenderProfile/LenderLoansList.vue b/src/components/LenderProfile/LenderLoansList.vue
index c33c54cc03..d2950bcbb6 100644
--- a/src/components/LenderProfile/LenderLoansList.vue
+++ b/src/components/LenderProfile/LenderLoansList.vue
@@ -1,18 +1,25 @@
 <template>
 	<section v-if="lenderLoans.length > 0" class="tw-my-8" id="lender-loans">
-		<h4 class="data-hj-suppress tw-mb-1">
-			{{ lenderLoansTitle }}
-		</h4>
-		<p class="tw-mb-2">
-			{{ showedLoans }}
-		</p>
+		<div v-if="totalCount > 0">
+			<h4 class="data-hj-suppress tw-mb-1">
+				{{ lenderLoansTitle }}
+			</h4>
+			<p class="tw-mb-2">
+				{{ showedLoans }}
+			</p>
+		</div>
+		<kv-loading-placeholder
+			v-else
+			class="tw-mb-2"
+			style="height: 55px; width: 250px;"
+		/>
 
 		<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3">
 			<new-home-page-loan-card
 				class="!tw-max-w-full lender-card"
 				v-for="(loan, index) in lenderLoans"
 				:item-index="index"
-				:key="`loan-${loan.id}`"
+				:key="`loan-${loan.id}-${index}`"
 				:loan-id="loan.id"
 				:lender-public-id="publicId"
 			/>
@@ -37,6 +44,7 @@ import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 import lenderLoansQuery from '@/graphql/query/lenderLoans.graphql';
 import NewHomePageLoanCard from '@/components/LoanCards/NewHomePageLoanCard';
 import KvPagination from '~/@kiva/kv-components/vue/KvPagination';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
 
 export default {
 	name: 'LenderLoansList',
@@ -45,6 +53,7 @@ export default {
 	components: {
 		NewHomePageLoanCard,
 		KvPagination,
+		KvLoadingPlaceholder,
 	},
 	props: {
 		publicId: {
@@ -58,7 +67,7 @@ export default {
 	},
 	data() {
 		return {
-			lenderLoans: [],
+			lenderLoans: new Array(4).fill({ id: 0 }),
 			loansLimit: 12,
 			loansOffset: 0,
 			totalCount: 0,
@@ -73,7 +82,7 @@ export default {
 		},
 		showedLoans() {
 			return this.totalCount > 1
-				? `${this.totalCount} loans`
+				? `${numeral(this.totalCount).format('0,0')} loans`
 				: `${this.totalCount} loan`;
 		},
 		urlParams() {
diff --git a/src/components/LenderProfile/LenderMap.vue b/src/components/LenderProfile/LenderMap.vue
index 35fd5b23d7..cae15ff5e6 100644
--- a/src/components/LenderProfile/LenderMap.vue
+++ b/src/components/LenderProfile/LenderMap.vue
@@ -1,71 +1,84 @@
 <template>
-	<section v-if="countriesData.length > 0">
-		<h4 class="data-hj-suppress tw-mb-2">
-			{{ lenderMapTitle }}
-		</h4>
-		<kv-map
-			class="
-				tw-rounded
-				tw-overflow-hidden
-				tw-mb-3
-			"
-			:auto-zoom-delay="500"
-			:aspect-ratio="1.8"
-			:lat="30"
-			:long="1"
-			:zoom-level="2"
-			:use-leaflet="true"
-			:show-zoom-control="true"
-			:allow-dragging="true"
-			:show-labels="false"
-			:countries-data="countriesData"
-			:show-fundraising-loans="showFundraisingLoans"
-			@country-lend-filter="countryFilterClicked"
-		/>
-		<div>
-			<p class="tw-mb-1 tw-font-medium">
-				Legend:
-			</p>
-			<div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-3 tw-gap-2">
-				<div
-					v-for="legend in legendData"
-					:key="legend.color"
-					class="tw-flex tw-items-start tw-gap-1"
-				>
-					<span
-						:class="[
-							'tw-w-4',
-							'tw-h-2',
-							'tw-border',
-							legend.color,
-						]"
-					></span>
-					<p class="tw-text-small tw-font-medium">
-						{{ legend.label }}
+	<async-lender-section @visible="() => isLoading = false">
+		<section v-if="countriesData.length > 0">
+			<div v-if="isLoading">
+				<kv-loading-placeholder
+					class="tw-mb-2"
+					style="height: 30px; width: 250px;"
+				/>
+				<kv-loading-placeholder
+					class="tw-w-full tw-aspect-video"
+				/>
+			</div>
+			<div v-else>
+				<h4 class="data-hj-suppress tw-mb-2">
+					{{ lenderMapTitle }}
+				</h4>
+				<kv-map
+					class="
+						tw-rounded
+						tw-overflow-hidden
+						tw-mb-3
+					"
+					:auto-zoom-delay="500"
+					:aspect-ratio="1.8"
+					:lat="30"
+					:long="1"
+					:zoom-level="2"
+					:use-leaflet="true"
+					:show-zoom-control="true"
+					:allow-dragging="true"
+					:show-labels="false"
+					:countries-data="countriesData"
+					:show-fundraising-loans="showFundraisingLoans"
+					@country-lend-filter="countryFilterClicked"
+				/>
+				<div>
+					<p class="tw-mb-1 tw-font-medium">
+						Legend:
 					</p>
+					<div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-3 tw-gap-2">
+						<div
+							v-for="legend in legendData"
+							:key="legend.color"
+							class="tw-flex tw-items-start tw-gap-1"
+						>
+							<span
+								:class="[
+									'tw-w-4',
+									'tw-h-2',
+									'tw-border',
+									legend.color,
+								]"
+							></span>
+							<p class="tw-text-small tw-font-medium">
+								{{ legend.label }}
+							</p>
+						</div>
+					</div>
+					<div class="tw-flex tw-items-center tw-gap-1 tw-mt-2">
+						<span
+							class="tw-w-1 tw-h-1 tw-border tw-rounded-full tw-bg-brand-900"
+						></span>
+						<p class="tw-text-small tw-font-medium">
+							Fundraising loans
+						</p>
+					</div>
+				</div>
+				<div class="tw-mt-3">
+					<p class="tw-mb-1 tw-font-medium">
+						Options:
+					</p>
+					<kv-checkbox
+						class="tw-text-small tw-font-medium custom-checkbox"
+						v-model="showFundraisingLoans"
+					>
+						Show fundraising loans
+					</kv-checkbox>
 				</div>
 			</div>
-			<div class="tw-flex tw-items-center tw-gap-1 tw-mt-2">
-				<span
-					class="tw-w-1 tw-h-1 tw-border tw-rounded-full tw-bg-brand-900"
-				></span>
-				<p class="tw-text-small tw-font-medium">
-					Fundraising loans
-				</p>
-			</div>
-		</div>
-		<div class="tw-mt-3">
-			<p class="tw-mb-1 tw-font-medium">
-				Options:
-			</p>
-			<kv-checkbox
-				class="tw-text-small tw-font-medium custom-checkbox"
-				v-model="showFundraisingLoans"
-			>
-				Show fundraising loans
-			</kv-checkbox>
-		</div>
-	</section>
+		</section>
+	</async-lender-section>
 </template>
 
 <script>
@@ -73,6 +86,8 @@ import numeral from 'numeral';
 import KvCheckbox from '~/@kiva/kv-components/vue/KvCheckbox';
 import KvMap from '~/@kiva/kv-components/vue/KvMap';
 import { getLoansIntervals } from '~/@kiva/kv-components/utils/mapUtils';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
+import AsyncLenderSection from './AsyncLenderSection';
 
 const mapColors = [
 	100,
@@ -88,6 +103,8 @@ export default {
 	components: {
 		KvMap,
 		KvCheckbox,
+		KvLoadingPlaceholder,
+		AsyncLenderSection,
 	},
 	props: {
 		lenderInfo: {
@@ -98,6 +115,7 @@ export default {
 	data() {
 		return {
 			showFundraisingLoans: true,
+			isLoading: true,
 		};
 	},
 	computed: {
diff --git a/src/components/LenderProfile/LenderStats.vue b/src/components/LenderProfile/LenderStats.vue
index de5a680a78..ae07856198 100644
--- a/src/components/LenderProfile/LenderStats.vue
+++ b/src/components/LenderProfile/LenderStats.vue
@@ -1,22 +1,37 @@
 <template>
-	<section class="tw-my-8">
-		<h4 class="tw-mb-2">
-			Portfolio distribution
-		</h4>
-		<stats-table
-			class="lender-stats"
-			:location-stats="locationStats"
-			:gender-stats="genderStats"
-			:sector-stats="sectorStats"
-			:partner-stats="partnerStats"
-			track-category="lender"
-			chart="pie"
-		/>
-	</section>
+	<async-lender-section @visible="() => isLoading = false">
+		<section class="tw-my-8">
+			<div v-if="isLoading">
+				<kv-loading-placeholder
+					class="tw-mb-2"
+					style="height: 30px; width: 250px;"
+				/>
+				<kv-loading-placeholder
+					class="tw-w-full tw-aspect-video"
+				/>
+			</div>
+			<div v-else>
+				<h4 class="tw-mb-2">
+					Portfolio distribution
+				</h4>
+				<stats-table
+					class="lender-stats"
+					:location-stats="locationStats"
+					:gender-stats="genderStats"
+					:sector-stats="sectorStats"
+					:partner-stats="partnerStats"
+					track-category="lender"
+					chart="pie"
+				/>
+			</div>
+		</section>
+	</async-lender-section>
 </template>
 
 <script>
 import StatsTable from '@/components/Stats/StatsTable';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
+import AsyncLenderSection from './AsyncLenderSection';
 
 export default {
 	name: 'LenderStats',
@@ -26,10 +41,17 @@ export default {
 			type: Object,
 			default: () => ({}),
 			required: true,
-		}
+		},
+	},
+	data() {
+		return {
+			isLoading: true,
+		};
 	},
 	components: {
 		StatsTable,
+		KvLoadingPlaceholder,
+		AsyncLenderSection,
 	},
 	methods: {
 		statsWithPercent(stats) {
diff --git a/src/components/LenderProfile/LenderTeamsList.vue b/src/components/LenderProfile/LenderTeamsList.vue
index 7337e276e1..b67eb9319d 100644
--- a/src/components/LenderProfile/LenderTeamsList.vue
+++ b/src/components/LenderProfile/LenderTeamsList.vue
@@ -1,51 +1,64 @@
 <template>
-	<section v-if="lenderTeams.length > 0" class="tw-my-8" id="lender-teams">
-		<h4 class="data-hj-suppress tw-mb-1">
-			{{ lenderTeamsTitle }}
-		</h4>
-		<p class="tw-mb-2">
-			{{ showedTeams }}
-		</p>
-
-		<div class="tw-grid tw-grid-cols-2 md:tw-grid-cols-4 lg:tw-grid-cols-6 tw-gap-4">
-			<div
-				v-for="team in lenderTeams"
-				:key="`team-${team.id}`"
-				class="tw-flex tw-flex-col tw-gap-0.5"
-			>
-				<a
-					:href="`/team/${team.teamPublicId}`"
-				>
-					<kv-material-icon
-						v-if="!getImageUrl(team)"
-						:icon="mdiAccountCircle"
-						class="!tw-block tw-mx-auto tw-w-3/4"
-					/>
-					<img
-						v-else
-						:src="getImageUrl(team)"
-						style="width: 200px;"
-						class="tw-object-cover tw-aspect-square"
-					>
-				</a>
-				<a
-					:href="`/team/${team.teamPublicId}`"
+	<async-lender-section @visible="fetchLenderTeams">
+		<section v-if="lenderTeams.length > 0" class="tw-my-8" id="lender-teams">
+			<div v-if="!isLoading">
+				<h4 class="data-hj-suppress tw-mb-1">
+					{{ lenderTeamsTitle }}
+				</h4>
+				<p class="tw-mb-2">
+					{{ showedTeams }}
+				</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="(team, index) in lenderTeams"
+					:key="`team-${team.id}-${index}`"
+					class="tw-flex tw-flex-col tw-gap-0.5"
 				>
-					{{ team.name }}
-				</a>
-				<p>{{ team.category }}</p>
+					<div v-if="!team.id">
+						<kv-loading-placeholder class="tw-w-full tw-aspect-square" />
+					</div>
+					<div v-else>
+						<a
+							:href="`/team/${team.teamPublicId}`"
+						>
+							<kv-material-icon
+								v-if="!getImageUrl(team)"
+								:icon="mdiAccountCircle"
+								class="!tw-block tw-mx-auto tw-w-3/4"
+							/>
+							<img
+								v-else
+								:src="getImageUrl(team)"
+								style="width: 200px;"
+								class="tw-object-cover tw-aspect-square"
+							>
+						</a>
+						<a
+							:href="`/team/${team.teamPublicId}`"
+						>
+							{{ team.name }}
+						</a>
+						<p>{{ team.category }}</p>
+					</div>
+				</div>
 			</div>
-		</div>
-		<kv-pagination
-			class="tw-mt-4"
-			v-if="totalCount > teamsLimit"
-			:limit="teamsLimit"
-			:total="totalCount"
-			:offset="teamsOffset"
-			:scroll-to-top="false"
-			@page-changed="pageChange"
-		/>
-	</section>
+			<kv-pagination
+				class="tw-mt-4"
+				v-if="totalCount > teamsLimit"
+				:limit="teamsLimit"
+				:total="totalCount"
+				:offset="teamsOffset"
+				:scroll-to-top="false"
+				@page-changed="pageChange"
+			/>
+		</section>
+	</async-lender-section>
 </template>
 
 <script>
@@ -58,6 +71,8 @@ import smoothScrollMixin from '@/plugins/smooth-scroll-mixin';
 import lenderTeamsQuery from '@/graphql/query/lenderTeams.graphql';
 import KvPagination from '~/@kiva/kv-components/vue/KvPagination';
 import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
+import AsyncLenderSection from './AsyncLenderSection';
 
 export default {
 	name: 'LenderTeamsList',
@@ -66,6 +81,8 @@ export default {
 	components: {
 		KvPagination,
 		KvMaterialIcon,
+		KvLoadingPlaceholder,
+		AsyncLenderSection,
 	},
 	props: {
 		publicId: {
@@ -79,12 +96,13 @@ export default {
 	},
 	data() {
 		return {
-			lenderTeams: [],
+			lenderTeams: new Array(6).fill({ id: 0 }),
 			teamsLimit: 12,
 			teamsOffset: 0,
 			totalCount: 0,
 			pageQuery: { teams: '1' },
 			mdiAccountCircle,
+			isLoading: true,
 		};
 	},
 	computed: {
@@ -118,6 +136,7 @@ export default {
 
 				this.lenderTeams = data.community?.lender?.teams?.values ?? [];
 				this.totalCount = data.community?.lender?.teams?.totalCount ?? 0;
+				this.isLoading = false;
 			} catch (e) {
 				logReadQueryError(e, 'LenderTeamsList lenderTeamsQuery');
 			}
@@ -148,12 +167,9 @@ export default {
 			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
 		}
 	},
-	mounted() {
-		this.fetchLenderTeams();
-	},
 	created() {
 		this.pageQuery = _get(this.$route, 'query');
 		this.updateFromParams(this.pageQuery);
-	}
+	},
 };
 </script>