From 6488b636b668ea33eb2128cde4e5001044158c7a Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Tue, 11 Feb 2025 12:07:47 +0100
Subject: [PATCH] Overview: Add spinner when waiting for all components to be
 ready

---
 .../js/Components/Screens/Settings/Tabs/TabOverview.js   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
index 05ba880d5..a5a1014e6 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
@@ -16,6 +16,7 @@ import { useTodos } from '../../../../data/todos/hooks';
 import { useMerchantInfo } from '../../../../data/common/hooks';
 import { STORE_NAME as COMMON_STORE_NAME } from '../../../../data/common';
 import { STORE_NAME as TODOS_STORE_NAME } from '../../../../data/todos';
+import { CommonHooks, TodosHooks } from '../../../../data';
 
 import { getFeatures } from '../Components/Overview/features-config';
 
@@ -23,8 +24,16 @@ import {
 	NOTIFICATION_ERROR,
 	NOTIFICATION_SUCCESS,
 } from '../../../ReusableComponents/Icons';
+import SpinnerOverlay from '../../../ReusableComponents/SpinnerOverlay';
 
 const TabOverview = () => {
+	const { isReady: areTodosReady } = TodosHooks.useTodos();
+	const { isReady: merchantIsReady } = CommonHooks.useMerchantInfo();
+
+	if ( ! areTodosReady || ! merchantIsReady ) {
+		return <SpinnerOverlay asModal={ true } />;
+	}
+
 	return (
 		<div className="ppcp-r-tab-overview">
 			<OverviewTodos />