Update

resources/js/pages/home/home.tsx

@@ -1,3 +1,4 @@
+import EditorSkeleton from '@/components/editor/EditorSkeleton.jsx';
 import { useEffect, useState } from 'react';
 import BrandLogo from './partials/BrandLogo.jsx';
 import FAQDiscord from './partials/FAQDiscord.jsx';
@@ -24,13 +25,7 @@ const Home = ({ faqData, popularKeywords }) => {
         <div className="min-h-[100vh] space-y-0 bg-neutral-50 py-6 dark:bg-black">
             <BrandLogo className="pb-2" />
             <div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
-                {isClient && Editor ? (
-                    <Editor />
-                ) : (
-                    <div className="flex h-96 items-center justify-center">
-                        <div className="text-muted-foreground">Loading editor...</div>
-                    </div>
-                )}
+                {isClient && Editor ? <Editor /> : <EditorSkeleton />}
             </div>
             <div className="space-y-16">
                 <Hero />

resources/js/pages/memes/show.tsx

@@ -1,9 +1,9 @@
 import { MemeCard } from '@/components/custom/meme-card';
+import EditorSkeleton from '@/components/editor/EditorSkeleton';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { KeywordBadge } from '@/components/ui/keyword-badge';
-import { Spinner } from '@/components/ui/spinner';
 import Footer from '@/pages/home/partials/Footer';
 import { Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
@@ -94,14 +94,7 @@ export default function MemeShow({ meme, relatedMemes }: Props) {
                             setInitialText={(setText) => setText('add your meme caption here')}
                         />
                     ) : (
-                        <div className="flex h-96 items-center justify-center text-center">
-                            <div className="space-y-2">
-                                <Spinner />
-                                <div className="text-muted-foreground" data-nosnippet>
-                                    Loading meme video editor...
-                                </div>
-                            </div>
-                        </div>
+                        <EditorSkeleton />
                     )}
                 </div>
                 <div className="container mx-auto grid justify-center gap-5 lg:grid-cols-1" id="more-info">