mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { useParams } from 'common'
|
|
import { Loader2Icon } from 'lucide-react'
|
|
|
|
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
|
|
import { PROJECT_STATUS } from '@/lib/constants'
|
|
|
|
export const ResizingState = () => {
|
|
const { ref } = useParams()
|
|
useProjectDetailQuery(
|
|
{ ref },
|
|
{
|
|
// setting a refetch interval here will cause the `useSelectedProject()` in `ProjectLayout.tsx` to
|
|
// rerender every 4 seconds while the project is resizing. Once resizing is complete, it will
|
|
// no longer show this state.
|
|
refetchInterval: (query) => {
|
|
const data = query.state.data
|
|
return data?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? 4000 : false
|
|
},
|
|
}
|
|
)
|
|
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="bg-surface-100 border border-overlay rounded-md w-3/4 lg:w-1/2">
|
|
<div className="space-y-6 py-6">
|
|
<div className="flex px-8 space-x-8">
|
|
<div className="mt-1">
|
|
<Loader2Icon className="animate-spin text-foreground-light" size={18} />
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p>Resizing project</p>
|
|
<p className="text-sm text-foreground-light">
|
|
Your project is being restarted to apply compute size changes. It will remain
|
|
offline until fully restarted. This can take a few minutes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|