From f7b8184fe8242a1ff13fade016b9f82e72302ecc Mon Sep 17 00:00:00 2001
From: mayuran-deriv <balamayuran@regentmarkets.com>
Date: Mon, 26 May 2025 16:35:51 +0400
Subject: [PATCH] fix: loading and ff

---
 src/components/Layout/CustomLayout.tsx | 45 ++++++++++++++++++++----
 src/hooks/useTmbEnabled/index.tsx      | 48 ++++++++++++++++++++++++++
 src/utils/index.ts                     | 13 +++++++
 3 files changed, 99 insertions(+), 7 deletions(-)
 create mode 100644 src/hooks/useTmbEnabled/index.tsx

diff --git a/src/components/Layout/CustomLayout.tsx b/src/components/Layout/CustomLayout.tsx
index 07d20e59..0cef70e7 100644
--- a/src/components/Layout/CustomLayout.tsx
+++ b/src/components/Layout/CustomLayout.tsx
@@ -5,13 +5,13 @@ import Head from '@docusaurus/Head';
 import HomePageSkeleton from '../HomePageSkeleton';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import useTMB from '@site/src/hooks/useTmb';
+import useTmbEnabled from '@site/src/hooks/useTmbEnabled';
 
 const CustomLayout: React.FC = () => {
   const { onRenderTMBCheck } = useTMB();
   const [loader, setLoader] = useState(true);
   const [isSilentLoginExcluded, setIsSilentLoginExcluded] = useState(false);
-  const isTMBEnabled =
-    typeof window !== 'undefined' && JSON.parse(localStorage.getItem('is_tmb_enabled') ?? 'false');
+  const [isTMBEnabled, isTmbLoading] = useTmbEnabled();
 
   const initRef = useRef(false);
 
@@ -26,13 +26,32 @@ const CustomLayout: React.FC = () => {
     initRef.current = true;
   }, [onRenderTMBCheck]);
 
+  const hideMainElement = () => {
+    const mainElement = document.querySelector('[aria-label="Main"]') as HTMLElement;
+    if (mainElement) {
+      mainElement.style.display = 'none';
+    }
+  };
+
   useEffect(() => {
-    isTMBEnabled && initSession();
-  }, [initSession, isTMBEnabled]);
+    // Don't execute any TMB-related code until we know if TMB is enabled
+    if (isTmbLoading) {
+      // Hide main element while TMB status is loading
+      hideMainElement();
+      setLoader(true);
+      return;
+    }
+
+    if (isTMBEnabled) {
+      // Hide main element while TMB is loading
+      hideMainElement();
+      initSession();
+    }
+  }, [initSession, isTMBEnabled, isTmbLoading]);
 
   useEffect(() => {
     // Only execute in browser environment
-    if (!ExecutionEnvironment.canUseDOM || isTMBEnabled) {
+    if (!ExecutionEnvironment.canUseDOM || isTmbLoading || isTMBEnabled) {
       return;
     }
 
@@ -64,11 +83,23 @@ const CustomLayout: React.FC = () => {
     if ((willEventuallySSO || willEventuallySLO) && !isSilentLoginExcluded) {
       mainElement.style.display = 'none';
       setLoader(true);
-    } else {
+    } else if (!isTMBEnabled) {
+      // Only show main element if TMB is not enabled
+      // When TMB is enabled, the display will be controlled by the TMB loading effect
       mainElement.style.display = '';
       setLoader(false);
     }
-  }, [isSilentLoginExcluded, isTMBEnabled]);
+  }, [isSilentLoginExcluded, isTMBEnabled, isTmbLoading]);
+
+  // Effect to restore main element display when TMB loading is complete
+  useEffect(() => {
+    if (isTMBEnabled && !loader) {
+      const mainElement = document.querySelector('[aria-label="Main"]') as HTMLElement;
+      if (mainElement) {
+        mainElement.style.display = '';
+      }
+    }
+  }, [loader, isTMBEnabled]);
 
   return (
     <>
diff --git a/src/hooks/useTmbEnabled/index.tsx b/src/hooks/useTmbEnabled/index.tsx
new file mode 100644
index 00000000..f097b2c5
--- /dev/null
+++ b/src/hooks/useTmbEnabled/index.tsx
@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { getTmbConfigUrl } from '@site/src/utils';
+
+/**
+ * Hook to fetch and determine if TMB (Third-party Marketplace Business) is enabled
+ * @returns {[boolean, boolean]} A tuple containing [isTmbEnabled, isLoading]
+ */
+const useTmbEnabled = (): [boolean, boolean] => {
+  const [isTmbEnabled, setIsTmbEnabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Get the TMB config URL from utils
+  const configUrl = getTmbConfigUrl();
+
+  // Fetch TMB enabled status from remote config
+  useEffect(() => {
+    if (!configUrl) return;
+
+    const fetchTmbStatus = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(configUrl);
+        const data = await response.json();
+
+        // Use the "api" key from the response, default to false if undefined
+        const isEnabled = data?.api === true;
+
+        // Store the value in localStorage for other components to use
+        if (typeof window !== 'undefined') {
+          localStorage.setItem('is_tmb_enabled', JSON.stringify(!!isEnabled));
+        }
+
+        setIsTmbEnabled(!!isEnabled);
+      } catch (error) {
+        console.error('Failed to fetch TMB status:', error);
+        setIsTmbEnabled(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchTmbStatus();
+  }, [configUrl]);
+
+  return [isTmbEnabled, isLoading];
+};
+
+export default useTmbEnabled;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 285686fc..8ff1b2f1 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -238,3 +238,16 @@ export const scopesArrayToObject = (scopes: string[]) => {
 export const findVirtualAccount = (accounts: IUserLoginAccount[]) => {
   return accounts.find((item) => item.name.includes('VRTC'));
 };
+
+/**
+ * Returns the appropriate TMB config URL based on the environment
+ * @returns {string} The TMB config URL
+ */
+export const getTmbConfigUrl = () => {
+  if (typeof window === 'undefined') return '';
+
+  const isProduction = isHost('api.deriv.com');
+  return isProduction
+    ? 'https://app-config-prod.firebaseio.com/remote_config/oauth/is_tmb_enabled.json'
+    : 'https://app-config-staging.firebaseio.com/remote_config/oauth/is_tmb_enabled.json';
+};