A4A > Migrations: Implement loading indicator for commissions (#96390)

* Implement loading indicator for commissions * use useMemo for content
Automattic · Nov 14, 2024 · ecc4164 · ecc4164
1 parent 39f4e0d
commit ecc4164
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 16 deletions.
diff --git a/client/a8c-for-agencies/sections/migrations/primary/migrations-commissions/index.tsx b/client/a8c-for-agencies/sections/migrations/primary/migrations-commissions/index.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@wordpress/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import Layout from 'calypso/a8c-for-agencies/components/layout';
 import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body';
 import LayoutHeader, {
@@ -11,6 +11,7 @@ import LayoutHeader, {
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
 import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
 import { A4A_MIGRATIONS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import TextPlaceholder from 'calypso/a8c-for-agencies/components/text-placeholder';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import MigrationsCommissionsList from '../../commissions-list';
@@ -34,16 +35,30 @@ export default function MigrationsCommissions() {
 		setShowAddSitesModal( true );
 	}, [ dispatch ] );
 
-	const { data: migrationCommissions, isFetching: isFetchingCommissions } =
-		useFetchMigrationCommissions();
-
-	if ( isFetchingCommissions ) {
-		// TODO: Add a loading state
-		return null;
-	}
+	const { data: migrationCommissions, isFetched } = useFetchMigrationCommissions();
 
 	const showEmptyState = ! migrationCommissions?.length;
 
+	const content = useMemo( () => {
+		if ( ! isFetched ) {
+			return (
+				<>
+					<TextPlaceholder />
+					<TextPlaceholder />
+				</>
+			);
+		}
+
+		return showEmptyState ? (
+			<MigrationsCommissionsEmptyState setShowAddSitesModal={ setShowAddSitesModal } />
+		) : (
+			<div className="migrations-commissions__content">
+				<MigrationsConsolidatedCommissions items={ migrationCommissions } />
+				<MigrationsCommissionsList items={ migrationCommissions } />
+			</div>
+		);
+	}, [ isFetched, showEmptyState, migrationCommissions, setShowAddSitesModal ] );
+
 	return (
 		<Layout
 			className={ clsx( 'migrations-commissions', {
@@ -77,14 +92,7 @@ export default function MigrationsCommissions() {
 
 			<LayoutBody>
 				<>
-					{ showEmptyState ? (
-						<MigrationsCommissionsEmptyState setShowAddSitesModal={ setShowAddSitesModal } />
-					) : (
-						<div className="migrations-commissions__content">
-							<MigrationsConsolidatedCommissions items={ migrationCommissions } />
-							<MigrationsCommissionsList items={ migrationCommissions } />
-						</div>
-					) }
+					{ content }
 					{ showAddSitesModal && (
 						<MigrationsTagSitesModal onClose={ () => setShowAddSitesModal( false ) } />
 					) }

diff --git a/client/a8c-for-agencies/sections/migrations/primary/migrations-commissions/style.scss b/client/a8c-for-agencies/sections/migrations/primary/migrations-commissions/style.scss
@@ -6,6 +6,19 @@
 		max-width: 900px;
 	}
 
+	.a4a-text-placeholder {
+		height: 100px;
+		margin: 16px;
+
+		&:nth-child(2) {
+			height: 200px;
+		}
+
+		@include break-large {
+			margin: 16px 64px 48px;
+		}
+	}
+
 	.step-section-item__content {
 		max-width: none;