fix(ui): initial data load

frontend/app/Router.tsx

@@ -75,6 +75,11 @@ const Router: React.FC<RouterProps> = (props) => {
 
   const handleUserLogin = async () => {
     props.mstore.initClient();
+    await fetchUserInfo();
+
+    const siteIdFromPath = parseInt(location.pathname.split('/')[1]);
+    await fetchSiteList(siteIdFromPath);
+
     const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
     if (
       destinationPath &&
@@ -84,9 +89,6 @@ const Router: React.FC<RouterProps> = (props) => {
       history.push(destinationPath + location.search);
       localStorage.removeItem(GLOBAL_DESTINATION_PATH);
     }
-    await fetchUserInfo();
-    const siteIdFromPath = parseInt(location.pathname.split('/')[1]);
-    await fetchSiteList(siteIdFromPath);
   };
 
   useEffect(() => {
@@ -135,12 +137,12 @@ const Router: React.FC<RouterProps> = (props) => {
 
   return isLoggedIn ? (
     <ModalProvider>
-      <Layout hideHeader={hideHeader} siteId={siteId}>
-        <Loader loading={loading || !siteId} className='flex-1'>
+      <Loader loading={loading || !siteId} className='flex-1'>
+        <Layout hideHeader={hideHeader} siteId={siteId}>
           <Notification />
           <PrivateRoutes />
-        </Loader>
-      </Layout>
+        </Layout>
+      </Loader>
     </ModalProvider>
   ) : <PublicRoutes />;
 };
@@ -150,13 +152,14 @@ const mapStateToProps = (state: Map<string, any>) => {
   const jwt = state.getIn(['user', 'jwt']);
   const changePassword = state.getIn(['user', 'account', 'changePassword']);
   const userInfoLoading = state.getIn(['user', 'fetchUserInfoRequest', 'loading']);
+  const sitesLoading = state.getIn(['site', 'fetchListRequest', 'loading']);
 
   return {
     siteId,
     changePassword,
     sites: state.getIn(['site', 'list']),
     isLoggedIn: jwt !== null && !changePassword,
-    loading: siteId === null || userInfoLoading,
+    loading: siteId === null || userInfoLoading || sitesLoading,
     email: state.getIn(['user', 'account', 'email']),
     account: state.getIn(['user', 'account']),
     organisation: state.getIn(['user', 'account', 'name']),

frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx

@@ -5,7 +5,7 @@ import { CaretDownOutlined, FolderAddOutlined, FolderOutlined } from '@ant-desig
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { hasSiteId, siteChangeAvailable } from 'App/routes';
 import { setSiteId } from 'Duck/site';
-import { fetchListActive as fetchIntegrationVariables } from 'Duck/customField';
+import { fetchListActive as fetchMetadata } from 'Duck/customField';
 import { clearSearch } from 'Duck/search';
 import { clearSearch as clearSearchLive } from 'Duck/liveSearch';
 import { useModal } from 'Components/Modal';
@@ -27,7 +27,7 @@ interface Props extends RouteComponentProps {
   sites: Site[];
   siteId: string;
   setSiteId: (siteId: string) => void;
-  fetchIntegrationVariables: () => void;
+  fetchMetadata: () => void;
   clearSearch: (isSession: boolean) => void;
   clearSearchLive: () => void;
   initProject: (data: any) => void;
@@ -44,7 +44,7 @@ function ProjectDropdown(props: Props) {
 
   const handleSiteChange = (newSiteId: string) => {
     props.setSiteId(newSiteId); // Fixed: should set the new siteId, not the existing one
-    props.fetchIntegrationVariables();
+    props.fetchMetadata();
     props.clearSearch(location.pathname.includes('/sessions'));
     props.clearSearchLive();
 
@@ -106,7 +106,7 @@ const mapStateToProps = (state: any) => ({
 export default withRouter(
   connect(mapStateToProps, {
     setSiteId,
-    fetchIntegrationVariables,
+    fetchMetadata,
     clearSearch,
     clearSearchLive,
     initProject

frontend/app/layout/TopHeader.tsx

@@ -29,16 +29,13 @@ function TopHeader(props: Props) {
 
   useEffect(() => {
     if (!account.id || initialDataFetched) return;
+    Promise.all([
+      userStore.fetchLimits(),
+      notificationStore.fetchNotificationsCount()
 
-    setTimeout(() => {
-      Promise.all([
-        userStore.fetchLimits(),
-        notificationStore.fetchNotificationsCount()
-
-      ]).then(() => {
-        userStore.updateKey('initialDataFetched', true);
-      });
-    }, 0);
+    ]).then(() => {
+      userStore.updateKey('initialDataFetched', true);
+    });
   }, [account]);
 
   return (