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 59e7b07dc3c..8eb8ba8b471 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
@@ -25,6 +25,7 @@ import {
  * Internal dependencies
  */
 import { CardHeaderTitle } from '~/marketing/components';
+import { useNewCampaignTypes } from '~/marketing/hooks';
 import { useCampaigns } from './useCampaigns';
 import { CreateNewCampaignModal } from './CreateNewCampaignModal';
 import './Campaigns.scss';
@@ -52,15 +53,24 @@ const perPage = 5;
  * If there are no campaigns, there will be no table but an info message instead.
  *
  * If there is an error, there will be no table but an error message instead.
+ *
+ * The new campaign types data will also be loaded,
+ * so that when users click on the "Create new campaign" button in the card header,
+ * there will be no loading necessary in the modal.
  */
 export const Campaigns = () => {
 	const [ page, setPage ] = useState( 1 );
 	const [ open, setOpen ] = useState( false );
-	const { loading, data, meta } = useCampaigns( page, perPage );
+	const {
+		loading: loadingCampaigns,
+		data,
+		meta,
+	} = useCampaigns( page, perPage );
+	const { loading: loadingNewCampaignTypes } = useNewCampaignTypes();
 	const total = meta?.total;
 
 	const getContent = () => {
-		if ( loading ) {
+		if ( loadingNewCampaignTypes || loadingCampaigns ) {
 			return (
 				<TablePlaceholder
 					caption={ tableCaption }
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.tsx
index a7674af755a..3f4ead57a3a 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.tsx
@@ -36,8 +36,7 @@ type CreateCampaignModalProps = Omit< Modal.Props, 'title' | 'children' >;
 export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
 	const { className, ...restProps } = props;
 	const [ collapsed, setCollapsed ] = useState( true );
-	// TOOD: handle loading state.
-	const { loading, data: newCampaignTypes } = useNewCampaignTypes();
+	const { data: newCampaignTypes } = useNewCampaignTypes();
 	const { data: recommendedChannels } = useRecommendedChannels();
 
 	return (