mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Joshen Lim
0f4fc7eee9
* CmdK OrgProjectSwitcher to swap useProjectsQuery with useProjectsInfiniteQuery * Remove usage of useProjectsQuery in ProjectDropdown * Remove usage of useProjectsQuery in NotificationsPopover * Remove usage of useProjectsQuery in NotificationsFilter * Remove usage of useProjectsQuery from LoadingState * Clean * Remove usage of getProjects from org-ai-details and fix missing key props in AIOnboarding * Remove useAutoProjectsPrefetch from org/[slug]/index * Fix TS + clean up * Clean * Remove usage of useProjectsQuery in NewOrgForm
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { useParams } from 'common'
|
|
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
|
|
import { useProjectDetailQuery } from 'data/projects/project-detail-query'
|
|
|
|
export const LoadingState = () => {
|
|
const { ref } = useParams()
|
|
const { data: project, isLoading } = useProjectDetailQuery({ ref })
|
|
|
|
const projectName = ref !== 'default' ? project?.name : 'Welcome to your project'
|
|
|
|
return (
|
|
<div className="w-full mx-auto">
|
|
<div className="px-8 border-b">
|
|
<div className="max-w-7xl mx-auto flex items-center space-x-6 h-[184px]">
|
|
{isLoading ? (
|
|
<ShimmeringLoader className="h-9 w-40" />
|
|
) : (
|
|
<h1 className="text-3xl">{projectName}</h1>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="px-8 py-16">
|
|
<div className="max-w-7xl mx-auto">
|
|
<ProjectUsageLoadingState />
|
|
</div>
|
|
</div>
|
|
<div className="px-8">
|
|
<div className="max-w-7xl mx-auto space-y-4">
|
|
<ShimmeringLoader className="w-40 h-7" />
|
|
<ShimmeringLoader className="w-full h-32" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const ProjectUsageLoadingState = () => {
|
|
return (
|
|
<div className="space-y-6">
|
|
<ShimmeringLoader className="w-40 h-7" />
|
|
<div className="flex flex-col md:flex-row gap-2 md:gap-4">
|
|
<ShimmeringLoader className="w-full h-[320px] py-0" />
|
|
<ShimmeringLoader className="w-full h-[320px] py-0" />
|
|
<ShimmeringLoader className="w-full h-[320px] py-0" />
|
|
<ShimmeringLoader className="w-full h-[320px] py-0" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|