Fix to loading for health check

CodeClimbersIO · Sep 22, 2024 · 9339781 · 9339781
1 parent 1384fe4
commit 9339781
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/packages/app/src/api/health.api.ts b/packages/app/src/api/health.api.ts
@@ -1,16 +1,26 @@
 import { BASE_API_URL, useBetterQuery } from '.'
 import { apiRequest } from '../utils/request'
 
-export function useGetHealth() {
+export function useGetHealth(
+  {
+    refetchInterval = 1000,
+    retry = false,
+  }: {
+    refetchInterval?: number | false
+    retry?: boolean
+  } = {},
+  page: 'home' | 'install' = 'home',
+) {
   const queryFn = () =>
     apiRequest({
       url: `${BASE_API_URL}/health`,
       method: 'GET',
     })
   return useBetterQuery({
-    queryKey: ['health'],
+    queryKey: ['health', page],
     queryFn,
-    refetchOnWindowFocus: 'always',
+    refetchInterval,
+    retry,
     select: (data) => {
       if (data.OK && data.app === 'codeclimbers') {
         return true

diff --git a/packages/app/src/components/Home/HomePage.tsx b/packages/app/src/components/Home/HomePage.tsx
@@ -30,12 +30,16 @@ const Wrapper = styled('div')(({ theme }) => ({
 }))
 
 export const HomePage = () => {
-  const { data: health, isPending: isHealthPending } = useGetHealth()
+  const { data: health, isPending: isHealthPending } = useGetHealth({
+    retry: false,
+    refetchInterval: false,
+  })
   const [selectedDate, setSelectedDate] = useState(dayjs().startOf('day'))
 
   if (!health && !isHealthPending) return <Navigate to="/install" />
+
   return (
-    <div>
+    <div style={{ padding: '2rem' }}>
       <HomeHeader
         selectedDate={selectedDate}
         setSelectedDate={setSelectedDate}

diff --git a/packages/app/src/components/InstallPage.tsx b/packages/app/src/components/InstallPage.tsx
@@ -13,7 +13,10 @@ import { useGetHealth } from '../api/health.api'
 const InstallPage = () => {
   const [isWaiting, setIsWaiting] = useState(false)
   const [displayBlockedMessage, setDisplayBlockedMessage] = useState(false)
-  const { data: health } = useGetHealth()
+  const { data: health } = useGetHealth(
+    { retry: isWaiting, refetchInterval: isWaiting ? 1000 : false },
+    'install',
+  )
 
   if (health) return <Navigate to="/" />
 

diff --git a/packages/app/src/layouts/DashboardLayout.tsx b/packages/app/src/layouts/DashboardLayout.tsx
@@ -16,13 +16,13 @@ function DashboardLayout({ children }: DashboardLayoutProps) {
     return <UpdatePage />
   }
   return (
-    <Box sx={{ padding: '2rem' }}>
+    <>
       <LocalStorageAuthProvider>
         <UpdateBanner />
         <LocalApiKeyErrorBanner />
         {children || <Outlet />}
       </LocalStorageAuthProvider>
-    </Box>
+    </>
   )
 }