konnosDashboard
RestartingState.tsx43 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
7const RestartingState = () => {
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 restarting. Once restarting 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" size={18} />
29 </div>
30 <div className="space-y-1">
31 <p>Restarting...</p>
32 <p className="text-sm text-foreground-light">
33 Restarting can take a few minutes. Your project will be offline while it restarts.
34 </p>
35 </div>
36 </div>
37 </div>
38 </div>
39 </div>
40 )
41}
42
43export default RestartingState