konnosDashboard
ResizingState.tsx44 lines · main
1import { useParams } from 'common'
2import { Loader2 } from 'lucide-react'
3
4import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
5import { PROJECT_STATUS } from '@/lib/constants'
6
7export const ResizingState = () => {
8 const { ref } = useParams()
9 useProjectDetailQuery(
10 { ref },
11 {
12 // setting a refetch interval here will cause the `useSelectedProject()` in `ProjectLayout.tsx` to
13 // rerender every 4 seconds while the project is resizing. Once resizing is complete, it will
14 // no longer show this state.
15 refetchInterval: (query) => {
16 const data = query.state.data
17 return data?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? 4000 : false
18 },
19 }
20 )
21
22 return (
23 <div className="flex items-center justify-center h-full">
24 <div className="bg-surface-100 border border-overlay rounded-md w-3/4 lg:w-1/2">
25 <div className="space-y-6 py-6">
26 <div className="flex px-8 space-x-8">
27 <div className="mt-1">
28 <Loader2 className="animate-spin text-foreground-light" size={18} />
29 </div>
30 <div className="flex flex-col gap-1">
31 <p>Resizing Project Compute size</p>
32 <p className="text-sm text-foreground-light">
33 Your project is being restarted to apply compute size changes.
34 </p>
35 <p className="text-sm text-foreground-light">
36 This can take a few minutes. Project will be offline while it is being restarted.
37 </p>
38 </div>
39 </div>
40 </div>
41 </div>
42 </div>
43 )
44}