nekomimi.pet
+62
-2
public/editor/editor.tsx
+62
-2
public/editor/editor.tsx
···
18
18
import { Checkbox } from '@public/components/ui/checkbox'
19
19
import { Label } from '@public/components/ui/label'
20
20
import { Badge } from '@public/components/ui/badge'
21
+
import { SkeletonShimmer } from '@public/components/ui/skeleton'
21
22
import {
22
23
Loader2,
23
24
Trash2,
···
191
192
192
193
if (loading) {
193
194
return (
194
-
<div className="w-full min-h-screen bg-background flex items-center justify-center">
195
-
<Loader2 className="w-8 h-8 animate-spin text-primary" />
195
+
<div className="w-full min-h-screen bg-background">
196
+
{/* Header Skeleton */}
197
+
<header className="border-b border-border/40 bg-background/80 backdrop-blur-sm sticky top-0 z-50">
198
+
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
199
+
<div className="flex items-center gap-2">
200
+
<img src="/transparent-full-size-ico.png" alt="wisp.place" className="w-8 h-8" />
201
+
<span className="text-xl font-semibold text-foreground">
202
+
wisp.place
203
+
</span>
204
+
</div>
205
+
<div className="flex items-center gap-3">
206
+
<SkeletonShimmer className="h-5 w-32" />
207
+
<SkeletonShimmer className="h-8 w-8 rounded" />
208
+
</div>
209
+
</div>
210
+
</header>
211
+
212
+
<div className="container mx-auto px-4 py-8 max-w-6xl w-full">
213
+
{/* Title Skeleton */}
214
+
<div className="mb-8 space-y-2">
215
+
<SkeletonShimmer className="h-9 w-48" />
216
+
<SkeletonShimmer className="h-5 w-64" />
217
+
</div>
218
+
219
+
{/* Tabs Skeleton */}
220
+
<div className="space-y-6 w-full">
221
+
<div className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground w-full">
222
+
<SkeletonShimmer className="h-8 w-1/4 mx-1" />
223
+
<SkeletonShimmer className="h-8 w-1/4 mx-1" />
224
+
<SkeletonShimmer className="h-8 w-1/4 mx-1" />
225
+
<SkeletonShimmer className="h-8 w-1/4 mx-1" />
226
+
</div>
227
+
228
+
{/* Content Skeleton */}
229
+
<div className="space-y-4">
230
+
<div className="rounded-lg border border-border bg-card text-card-foreground shadow-sm">
231
+
<div className="flex flex-col space-y-1.5 p-6">
232
+
<SkeletonShimmer className="h-7 w-40" />
233
+
<SkeletonShimmer className="h-4 w-64" />
234
+
</div>
235
+
<div className="p-6 pt-0 space-y-4">
236
+
{[...Array(3)].map((_, i) => (
237
+
<div
238
+
key={i}
239
+
className="flex items-center justify-between p-4 border border-border rounded-lg"
240
+
>
241
+
<div className="flex-1 space-y-3">
242
+
<div className="flex items-center gap-3">
243
+
<SkeletonShimmer className="h-6 w-48" />
244
+
<SkeletonShimmer className="h-5 w-16" />
245
+
</div>
246
+
<SkeletonShimmer className="h-4 w-64" />
247
+
</div>
248
+
<SkeletonShimmer className="h-9 w-28" />
249
+
</div>
250
+
))}
251
+
</div>
252
+
</div>
253
+
</div>
254
+
</div>
255
+
</div>
196
256
</div>
197
257
)
198
258
}