From 6afb274e411d88418b51168ec4f7366b3275b172 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Thu, 19 Sep 2024 14:12:55 +0930
Subject: [PATCH] fix: Wait for dev mode request to finish before populating
 status container

---
 frontend/src/components/settings/SettingsPage.jsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/settings/SettingsPage.jsx b/frontend/src/components/settings/SettingsPage.jsx
index 0bdc9cb..d156b6b 100644
--- a/frontend/src/components/settings/SettingsPage.jsx
+++ b/frontend/src/components/settings/SettingsPage.jsx
@@ -27,10 +27,11 @@ const SettingsPage = () => {
     const [showBranchModal, setShowBranchModal] = useState(false);
     const [loadingAction, setLoadingAction] = useState('');
     const [statusLoading, setStatusLoading] = useState(true);
+    const [devModeLoading, setDevModeLoading] = useState(true);
     const [statusLoadingMessage, setStatusLoadingMessage] = useState('');
     const [noChangesMessage, setNoChangesMessage] = useState('');
-    const [activeTab, setActiveTab] = useState('git'); // New state for tab navigation
-    const tabsRef = useRef({}); // Ref for tabs
+    const [activeTab, setActiveTab] = useState('git');
+    const tabsRef = useRef({});
 
     useEffect(() => {
         fetchSettings();
@@ -38,12 +39,15 @@ const SettingsPage = () => {
     }, []);
 
     const checkDevModeStatus = async () => {
+        setDevModeLoading(true);
         try {
             const response = await checkDevMode();
             setIsDevMode(response.devMode);
         } catch (error) {
             console.error('Error checking dev mode:', error);
             setIsDevMode(false);
+        } finally {
+            setDevModeLoading(false);
         }
     };
 
@@ -215,14 +219,16 @@ const SettingsPage = () => {
 
                     {settings && (
                         <div className='space-y-4'>
-                            {statusLoading ? (
+                            {statusLoading || devModeLoading ? (
                                 <div className='flex items-left justify-left dark:bg-gray-800 p-4 rounded-md border border-gray-200 dark:border-gray-700 text-sm'>
                                     <Loader
                                         className='animate-spin mr-2'
                                         size={16}
                                     />
                                     <span className='text-gray-300'>
-                                        {statusLoadingMessage}
+                                        {statusLoading
+                                            ? statusLoadingMessage
+                                            : 'Checking development mode...'}
                                     </span>
                                 </div>
                             ) : (