LoadingState.tsx50 lines · main

1	import { useParams } from 'common'
2	import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
3
4	import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
5
6	export const LoadingState = () => {
7	const { ref } = useParams()
8	const { data: project, isPending: isLoading } = useProjectDetailQuery({ ref })
9
10	const projectName = ref !== 'default' ? project?.name : 'Welcome to your project'
11
12	return (
13	<div className="w-full mx-auto">
14	<div className="px-8 border-b">
15	<div className="max-w-7xl mx-auto flex items-center space-x-6 h-[184px]">
16	{isLoading ? (
17	<ShimmeringLoader className="h-9 w-40" />
18	) : (
19	<h1 className="text-3xl">{projectName}</h1>
20	)}
21	</div>
22	</div>
23	<div className="px-8 py-16">
24	<div className="max-w-7xl mx-auto">
25	<ProjectUsageLoadingState />
26	</div>
27	</div>
28	<div className="px-8">
29	<div className="max-w-7xl mx-auto space-y-4">
30	<ShimmeringLoader className="w-40 h-7" />
31	<ShimmeringLoader className="w-full h-32" />
32	</div>
33	</div>
34	</div>
35	)
36	}
37
38	export const ProjectUsageLoadingState = () => {
39	return (
40	<div className="space-y-6">
41	<ShimmeringLoader className="w-40 h-7" />
42	<div className="flex flex-col md:flex-row gap-2 md:gap-4">
43	<ShimmeringLoader className="w-full h-[320px] py-0" />
44	<ShimmeringLoader className="w-full h-[320px] py-0" />
45	<ShimmeringLoader className="w-full h-[320px] py-0" />
46	<ShimmeringLoader className="w-full h-[320px] py-0" />
47	</div>
48	</div>
49	)
50	}