A4A: Show placeholder when team member list is fetching. (#94139)

* Create a reusable page placeholder. * Update the landing page to use the reusable page. * Update team section to use the page placeholder.
Automattic · Sep 4, 2024 · 4b4c0f9 · 4b4c0f9
1 parent ad609d1
commit 4b4c0f9
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 77 deletions.
diff --git a/client/a8c-for-agencies/components/page-placeholder/index.tsx b/client/a8c-for-agencies/components/page-placeholder/index.tsx
@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import Layout from 'calypso/a8c-for-agencies/components/layout';
+import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body';
+import LayoutHeader, {
+	LayoutHeaderTitle as Title,
+} from 'calypso/a8c-for-agencies/components/layout/header';
+import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
+
+import './style.scss';
+
+type Props = {
+	title?: string;
+	className?: string;
+};
+
+export default function PagePlaceholder( { title, className }: Props ) {
+	return (
+		<Layout className={ clsx( 'a4a-page-placeholder', className ) } title={ title } wide>
+			<LayoutTop>
+				<LayoutHeader>
+					<Title>
+						<div className="a4a-page-placeholder__title-placeholder"></div>
+					</Title>
+				</LayoutHeader>
+			</LayoutTop>
+			<LayoutBody>
+				<div className="a4a-page-placeholder__section-placeholder">
+					<div className="a4a-page-placeholder__section-placeholder-title"></div>
+					<div className="a4a-page-placeholder__section-placeholder-body"></div>
+					<div className="a4a-page-placeholder__section-placeholder-footer"></div>
+				</div>
+			</LayoutBody>
+		</Layout>
+	);
+}
diff --git a/...-for-agencies/sections/landing/style.scss → ...es/components/page-placeholder/style.scss b/...-for-agencies/sections/landing/style.scss → ...es/components/page-placeholder/style.scss
@@ -3,35 +3,35 @@
 	background: var(--color-neutral-10);
 }
 
-.a4a-landing__title-placeholder {
+.a4a-page-placeholder__title-placeholder {
 	@include loading-effect;
 
 	width: 300px;
 	height: 43px;
 }
 
-.a4a-landing__section-placeholder {
+.a4a-page-placeholder__section-placeholder {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
 
-.a4a-landing__section-placeholder-title {
+.a4a-page-placeholder__section-placeholder-title {
 	@include loading-effect;
 
 	width: 100%;
 	height: 32px;
 }
 
 
-.a4a-landing__section-placeholder-body {
+.a4a-page-placeholder__section-placeholder-body {
 	@include loading-effect;
 
 	width: 100%;
 	height: 200px;
 }
 
-.a4a-landing__section-placeholder-footer {
+.a4a-page-placeholder__section-placeholder-footer {
 	@include loading-effect;
 
 	width: 20%;

diff --git a/client/a8c-for-agencies/sections/landing/landing.tsx b/client/a8c-for-agencies/sections/landing/landing.tsx
@@ -2,12 +2,7 @@ import page from '@automattic/calypso-router';
 import { addQueryArgs, getQueryArg, getQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect } from 'react';
-import Layout from 'calypso/a8c-for-agencies/components/layout';
-import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body';
-import LayoutHeader, {
-	LayoutHeaderTitle as Title,
-} from 'calypso/a8c-for-agencies/components/layout/header';
-import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
+import PagePlaceholder from 'calypso/a8c-for-agencies/components/page-placeholder';
 import {
 	A4A_OVERVIEW_LINK,
 	A4A_SIGNUP_LINK,
@@ -20,8 +15,6 @@ import {
 	isAgencyClientUser,
 } from 'calypso/state/a8c-for-agencies/agency/selectors';
 
-import './style.scss';
-
 /**
  * Redirect with Current Query
  * Adds all of the current location's query parameters to the provided URL before redirecting.
@@ -62,22 +55,5 @@ export default function Landing() {
 		redirectWithCurrentQuery( A4A_SIGNUP_LINK );
 	}, [ agency, hasFetched, isClientUser ] );
 
-	return (
-		<Layout className="a4a-landing" title={ title } wide>
-			<LayoutTop>
-				<LayoutHeader>
-					<Title>
-						<div className="a4a-landing__title-placeholder"></div>
-					</Title>
-				</LayoutHeader>
-			</LayoutTop>
-			<LayoutBody>
-				<div className="a4a-landing__section-placeholder">
-					<div className="a4a-landing__section-placeholder-title"></div>
-					<div className="a4a-landing__section-placeholder-body"></div>
-					<div className="a4a-landing__section-placeholder-footer"></div>
-				</div>
-			</LayoutBody>
-		</Layout>
-	);
+	return <PagePlaceholder title={ title } />;
 }
diff --git a/client/a8c-for-agencies/sections/team/primary/team-accept-invite/index.tsx b/client/a8c-for-agencies/sections/team/primary/team-accept-invite/index.tsx
@@ -7,6 +7,7 @@ import LayoutHeader, {
 	LayoutHeaderTitle as Title,
 } from 'calypso/a8c-for-agencies/components/layout/header';
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
+import PagePlaceholder from 'calypso/a8c-for-agencies/components/page-placeholder';
 import { A4A_OVERVIEW_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import useActivateMemberMutation, {
 	APIError,
@@ -27,16 +28,6 @@ type Props = {
 
 const ALREADY_MEMBER_OF_AGENCY_ERROR_CODE = 'a4a_user_invite_already_member_of_agency';
 
-function PlaceHolder() {
-	return (
-		<div className="team-accept-invite__section-placeholder">
-			<div className="team-accept-invite__section-placeholder-title"></div>
-			<div className="team-accept-invite__section-placeholder-body"></div>
-			<div className="team-accept-invite__section-placeholder-footer"></div>
-		</div>
-	);
-}
-
 function ErrorMessage( { error }: { error: string } ) {
 	return <div className="team-accept-invite__error">{ error }</div>;
 }
@@ -83,11 +74,7 @@ export default function TeamAcceptInvite( { agencyId, inviteId, secret }: Props
 	}, [ agency, agencyId ] );
 
 	const title = useMemo( () => {
-		if ( ! error ) {
-			return <div className="team-accept-invite__title-placeholder"></div>;
-		}
-
-		if ( error.code === ALREADY_MEMBER_OF_AGENCY_ERROR_CODE ) {
+		if ( error?.code === ALREADY_MEMBER_OF_AGENCY_ERROR_CODE ) {
 			return <img src={ AgencyLogo } alt="" />;
 		}
 
@@ -96,7 +83,7 @@ export default function TeamAcceptInvite( { agencyId, inviteId, secret }: Props
 
 	const content = useMemo( () => {
 		if ( ! error ) {
-			return <PlaceHolder />;
+			return null;
 		}
 
 		if (
@@ -112,6 +99,10 @@ export default function TeamAcceptInvite( { agencyId, inviteId, secret }: Props
 		return <ErrorMessage error={ error.message } />;
 	}, [ error ] );
 
+	if ( ! error ) {
+		return <PagePlaceholder />;
+	}
+
 	return (
 		<Layout className="team-accept-invite" title={ translate( 'Accepting team invite' ) } wide>
 			<LayoutTop>

diff --git a/client/a8c-for-agencies/sections/team/primary/team-accept-invite/style.scss b/client/a8c-for-agencies/sections/team/primary/team-accept-invite/style.scss
@@ -36,32 +36,3 @@ a.team-accept-invite__learn-more-button.is-link {
 	width: 300px;
 	height: 43px;
 }
-
-.team-accept-invite__section-placeholder {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.team-accept-invite__section-placeholder-title {
-	@include loading-effect;
-
-	width: 100%;
-	height: 32px;
-}
-
-
-.team-accept-invite__section-placeholder-body {
-	@include loading-effect;
-
-	width: 100%;
-	height: 200px;
-}
-
-.team-accept-invite__section-placeholder-footer {
-	@include loading-effect;
-
-	width: 20%;
-	min-width: 100px;
-	height: 43px;
-}
diff --git a/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx b/client/a8c-for-agencies/sections/team/primary/team-list/index.tsx
@@ -13,6 +13,7 @@ import LayoutHeader, {
 	LayoutHeaderTitle as Title,
 } from 'calypso/a8c-for-agencies/components/layout/header';
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
+import PagePlaceholder from 'calypso/a8c-for-agencies/components/page-placeholder';
 import { A4A_TEAM_INVITE_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import { useDispatch, useSelector } from 'calypso/state';
 import { hasAgencyCapability } from 'calypso/state/a8c-for-agencies/agency/selectors';
@@ -106,7 +107,7 @@ export default function TeamList() {
 	);
 
 	if ( isPending ) {
-		// FIXME: Add placeholder when UI is pending
+		return <PagePlaceholder />;
 	}
 
 	if ( ! hasMembers ) {