From af4f79ab28da6f4cd04191d2a3ca8639ab6b8d5d Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Sat, 17 Dec 2022 21:08:14 +0800
Subject: [PATCH] Add loading state for Campaigns card.

---
 .../Campaigns/Campaigns.tsx                   | 81 ++++++++++++-------
 .../Campaigns/useCampaigns.ts                 | 15 ++++
 2 files changed, 68 insertions(+), 28 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts

diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
index 4e4d2f93ea8..5ecccc2a6e7 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -8,35 +8,60 @@ import { Icon, megaphone } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { CardHeaderTitle } from '~/marketing/components';
+import { CardHeaderTitle, CenteredSpinner } from '~/marketing/components';
+import { useCampaigns } from './useCampaigns';
 import './Campaigns.scss';
 
 export const Campaigns = () => {
-	return (
-		<Card className="woocommerce-marketing-campaigns-card">
-			<CardHeader>
-				<CardHeaderTitle>
-					{ __( 'Campaigns', 'woocommerce' ) }
-				</CardHeaderTitle>
-				<Button variant="secondary">
-					{ __( 'Create new campaign', 'woocommerce' ) }
-				</Button>
-			</CardHeader>
-			<CardBody className="woocommerce-marketing-campaigns-card-body-empty-content">
-				<Icon icon={ megaphone } size={ 32 } />
-				<div className="woocommerce-marketing-campaigns-card-body-empty-content-title">
-					{ __(
-						'Advertise with marketing campaigns',
-						'woocommerce'
-					) }
-				</div>
-				<div>
-					{ __(
-						'Easily create and manage marketing campaigns without leaving WooCommerce.',
-						'woocommerce'
-					) }
-				</div>
-			</CardBody>
-		</Card>
-	);
+	const { loading, data } = useCampaigns();
+
+	if ( loading ) {
+		return (
+			<Card>
+				<CardHeader>
+					<CardHeaderTitle>
+						{ __( 'Campaigns', 'woocommerce' ) }
+					</CardHeaderTitle>
+					<Button variant="secondary">
+						{ __( 'Create new campaign', 'woocommerce' ) }
+					</Button>
+				</CardHeader>
+				<CardBody>
+					<CenteredSpinner />
+				</CardBody>
+			</Card>
+		);
+	}
+
+	if ( data.length === 0 ) {
+		return (
+			<Card className="woocommerce-marketing-campaigns-card">
+				<CardHeader>
+					<CardHeaderTitle>
+						{ __( 'Campaigns', 'woocommerce' ) }
+					</CardHeaderTitle>
+					<Button variant="secondary">
+						{ __( 'Create new campaign', 'woocommerce' ) }
+					</Button>
+				</CardHeader>
+				<CardBody className="woocommerce-marketing-campaigns-card-body-empty-content">
+					<Icon icon={ megaphone } size={ 32 } />
+					<div className="woocommerce-marketing-campaigns-card-body-empty-content-title">
+						{ __(
+							'Advertise with marketing campaigns',
+							'woocommerce'
+						) }
+					</div>
+					<div>
+						{ __(
+							'Easily create and manage marketing campaigns without leaving WooCommerce.',
+							'woocommerce'
+						) }
+					</div>
+				</CardBody>
+			</Card>
+		);
+	}
+
+	return <div>TODO: campaigns here.</div>;
 };
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts
new file mode 100644
index 00000000000..979e15d5532
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts
@@ -0,0 +1,15 @@
+// TODO: testing for loading state.
+export const useCampaigns = () => {
+	return {
+		loading: true,
+		data: [],
+	};
+};
+
+// TODO: testing for empty data.
+// export const useCampaigns = () => {
+// 	return {
+// 		loading: false,
+// 		data: [],
+// 	};
+// };