fix(ui): page api call could finish earlier that Layout api calls (#2506

) fixes #2479
flipt-io · Dec 8, 2023 · 903ed82 · 903ed82
1 parent 6cd2a3e
commit 903ed82
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git a/ui/src/app/Layout.tsx b/ui/src/app/Layout.tsx
@@ -9,13 +9,19 @@ import {
 } from 'react-router-dom';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
+import Loading from '~/components/Loading';
 import { NotificationProvider } from '~/components/NotificationProvider';
 import ErrorNotification from '~/components/notifications/ErrorNotification';
 import SuccessNotification from '~/components/notifications/SuccessNotification';
 import Sidebar from '~/components/Sidebar';
 import { useSession } from '~/data/hooks/session';
 import { useAppDispatch } from '~/data/hooks/store';
-import { fetchConfigAsync, fetchInfoAsync } from './meta/metaSlice';
+import { LoadingStatus } from '~/types/Meta';
+import {
+  fetchConfigAsync,
+  fetchInfoAsync,
+  selectConfig
+} from './meta/metaSlice';
 import {
   currentNamespaceChanged,
   selectCurrentNamespace,
@@ -32,6 +38,7 @@ function InnerLayout() {
   const location = useLocation();
   const navigate = useNavigate();
   const currentNamespace = useSelector(selectCurrentNamespace);
+  const config = useSelector(selectConfig);
 
   useEffect(() => {
     if (!namespaceKey) {
@@ -47,7 +54,7 @@ function InnerLayout() {
     }
   }, [namespaceKey, currentNamespace, dispatch, navigate, location.pathname]);
 
-  useListNamespacesQuery();
+  const namespaces = useListNamespacesQuery();
 
   useEffect(() => {
     dispatch(fetchInfoAsync());
@@ -58,6 +65,10 @@ function InnerLayout() {
     return <Navigate to="/login" />;
   }
 
+  if (namespaces.isLoading || config.status != LoadingStatus.SUCCEEDED) {
+    return <Loading fullScreen />;
+  }
+
   return (
     <>
       <Sidebar setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />

diff --git a/ui/src/app/meta/metaSlice.ts b/ui/src/app/meta/metaSlice.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { getConfig, getInfo } from '~/data/api';
-import { IConfig, IInfo, StorageType } from '~/types/Meta';
+import { IConfig, IInfo, LoadingStatus, StorageType } from '~/types/Meta';
 import { Theme } from '~/types/Preferences';
 
 interface IMetaSlice {
@@ -21,6 +21,7 @@ const initialState: IMetaSlice = {
     isRelease: false
   },
   config: {
+    status: LoadingStatus.IDLE,
     storage: {
       type: StorageType.DATABASE,
       readOnly: false
@@ -40,8 +41,12 @@ export const metaSlice = createSlice({
       .addCase(fetchInfoAsync.fulfilled, (state, action) => {
         state.info = action.payload;
       })
+      .addCase(fetchConfigAsync.pending, (state, _action) => {
+        state.config.status = LoadingStatus.LOADING;
+      })
       .addCase(fetchConfigAsync.fulfilled, (state, action) => {
         state.config = action.payload;
+        state.config.status = LoadingStatus.SUCCEEDED;
         if (action.payload.storage?.readOnly === undefined) {
           state.config.storage.readOnly =
             action.payload.storage?.type &&

diff --git a/ui/src/components/Loading.tsx b/ui/src/components/Loading.tsx
@@ -1,16 +1,26 @@
+import { cls } from '~/utils/helpers';
+
 type LoadingProps = {
   isPrimary?: boolean;
+  fullScreen?: boolean;
 };
 
 export default function Loading(props: LoadingProps) {
-  const { isPrimary } = props;
+  const { isPrimary, fullScreen } = props;
 
   return (
-    <div className="flex items-center justify-center">
+    <div
+      className={cls('flex h-screen items-center justify-center', {
+        'h-screen': fullScreen
+      })}
+    >
       <div
-        className={`h-5 w-5 ${
-          isPrimary ? 'border-white-300' : 'border-violet-300'
-        } animate-spin rounded-full border-b-2`}
+        className={cls(
+          'border-violet-300 h-5 w-5 animate-spin rounded-full border-b-2',
+          {
+            'border-white-300': isPrimary
+          }
+        )}
       ></div>
     </div>
   );

diff --git a/ui/src/types/Meta.ts b/ui/src/types/Meta.ts
@@ -21,6 +21,7 @@ export interface IUI {
 }
 
 export interface IConfig {
+  status: LoadingStatus;
   storage: IStorage;
   ui: IUI;
 }