commit ff1850f987e10d7493c0ec3ed5c7fcbbeaa0ff65 · nekomimi.pet/wisp.place-monorepo

+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
       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
       194
       -
       			<div className="w-full min-h-screen bg-background flex items-center justify-center">

     

       195
       195
       -
       				<Loader2 className="w-8 h-8 animate-spin text-primary" />

     

       195
       195
       +
       			<div className="w-full min-h-screen bg-background">

     

       196
       196
       +
       				{/* Header Skeleton */}

     

       197
       197
       +
       				<header className="border-b border-border/40 bg-background/80 backdrop-blur-sm sticky top-0 z-50">

     

       198
       198
       +
       					<div className="container mx-auto px-4 py-4 flex items-center justify-between">

     

       199
       199
       +
       						<div className="flex items-center gap-2">

     

       200
       200
       +
       							<img src="/transparent-full-size-ico.png" alt="wisp.place" className="w-8 h-8" />

     

       201
       201
       +
       							<span className="text-xl font-semibold text-foreground">

     

       202
       202
       +
       								wisp.place

     

       203
       203
       +
       							</span>

     

       204
       204
       +
       						</div>

     

       205
       205
       +
       						<div className="flex items-center gap-3">

     

       206
       206
       +
       							<SkeletonShimmer className="h-5 w-32" />

     

       207
       207
       +
       							<SkeletonShimmer className="h-8 w-8 rounded" />

     

       208
       208
       +
       						</div>

     

       209
       209
       +
       					</div>

     

       210
       210
       +
       				</header>

     

       211
       211
       +
       

     

       212
       212
       +
       				<div className="container mx-auto px-4 py-8 max-w-6xl w-full">

     

       213
       213
       +
       					{/* Title Skeleton */}

     

       214
       214
       +
       					<div className="mb-8 space-y-2">

     

       215
       215
       +
       						<SkeletonShimmer className="h-9 w-48" />

     

       216
       216
       +
       						<SkeletonShimmer className="h-5 w-64" />

     

       217
       217
       +
       					</div>

     

       218
       218
       +
       

     

       219
       219
       +
       					{/* Tabs Skeleton */}

     

       220
       220
       +
       					<div className="space-y-6 w-full">

     

       221
       221
       +
       						<div className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground w-full">

     

       222
       222
       +
       							<SkeletonShimmer className="h-8 w-1/4 mx-1" />

     

       223
       223
       +
       							<SkeletonShimmer className="h-8 w-1/4 mx-1" />

     

       224
       224
       +
       							<SkeletonShimmer className="h-8 w-1/4 mx-1" />

     

       225
       225
       +
       							<SkeletonShimmer className="h-8 w-1/4 mx-1" />

     

       226
       226
       +
       						</div>

     

       227
       227
       +
       

     

       228
       228
       +
       						{/* Content Skeleton */}

     

       229
       229
       +
       						<div className="space-y-4">

     

       230
       230
       +
       							<div className="rounded-lg border border-border bg-card text-card-foreground shadow-sm">

     

       231
       231
       +
       								<div className="flex flex-col space-y-1.5 p-6">

     

       232
       232
       +
       									<SkeletonShimmer className="h-7 w-40" />

     

       233
       233
       +
       									<SkeletonShimmer className="h-4 w-64" />

     

       234
       234
       +
       								</div>

     

       235
       235
       +
       								<div className="p-6 pt-0 space-y-4">

     

       236
       236
       +
       									{[...Array(3)].map((_, i) => (

     

       237
       237
       +
       										<div

     

       238
       238
       +
       											key={i}

     

       239
       239
       +
       											className="flex items-center justify-between p-4 border border-border rounded-lg"

     

       240
       240
       +
       										>

     

       241
       241
       +
       											<div className="flex-1 space-y-3">

     

       242
       242
       +
       												<div className="flex items-center gap-3">

     

       243
       243
       +
       													<SkeletonShimmer className="h-6 w-48" />

     

       244
       244
       +
       													<SkeletonShimmer className="h-5 w-16" />

     

       245
       245
       +
       												</div>

     

       246
       246
       +
       												<SkeletonShimmer className="h-4 w-64" />

     

       247
       247
       +
       											</div>

     

       248
       248
       +
       											<SkeletonShimmer className="h-9 w-28" />

     

       249
       249
       +
       										</div>

     

       250
       250
       +
       									))}

     

       251
       251
       +
       								</div>

     

       252
       252
       +
       							</div>

     

       253
       253
       +
       						</div>

     

       254
       254
       +
       					</div>

     

       255
       255
       +
       				</div>

     

       196
       256
        
       			</div>

     

       197
       257
        
       		)

     

       198
       258
        
       	}