Update team section to use the page placeholder.

client/a8c-for-agencies/sections/team/primary/team-accept-invite/index.tsx

@@ -1,12 +1,13 @@
 import page from '@automattic/calypso-router';
 import { useTranslate } from 'i18n-calypso';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } 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 } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import useActivateMemberMutation from 'calypso/a8c-for-agencies/data/team/use-activate-member';
 import { useDispatch, useSelector } from 'calypso/state';
@@ -21,16 +22,6 @@ type Props = {
 	secret?: string;
 };
 
-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>;
 }
@@ -78,28 +69,20 @@ export default function TeamAcceptInvite( { agencyId, inviteId, secret }: Props
 
 	const title = translate( 'Accepting team invite' );
 
-	const content = useMemo( () => {
-		if ( error ) {
-			return <ErrorMessage error={ error } />;
-		}
-
-		return <PlaceHolder />;
-	}, [ error ] );
+	if ( ! error ) {
+		return <PagePlaceholder />;
+	}
 
 	return (
 		<Layout className="team-accept-invite" title={ title } wide>
 			<LayoutTop>
 				<LayoutHeader>
-					<Title>
-						{ error ? (
-							translate( 'Invalid invite link' )
-						) : (
-							<div className="team-accept-invite__title-placeholder"></div>
-						) }
-					</Title>
+					<Title> { translate( 'Invalid invite link' ) }</Title>
 				</LayoutHeader>
 			</LayoutTop>
-			<LayoutBody>{ content }</LayoutBody>
+			<LayoutBody>
+				<ErrorMessage error={ error } />
+			</LayoutBody>
 		</Layout>
 	);
 }

client/a8c-for-agencies/sections/team/primary/team-accept-invite/style.scss

@@ -9,32 +9,3 @@
 	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;
-}

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 ) {