From 78e6318c711aa1864e2e54688bca6c8670193779 Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Tue, 24 Mar 2026 16:08:32 +0545
Subject: [PATCH] refactor: enhance loading components with improved skeleton
 structure and styling

---
 .../(dashboard)/templates/loading.tsx         | 103 ++++++++++--------
 .../(dashboard)/theme/loading.tsx             |  29 ++---
 2 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/loading.tsx b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/loading.tsx
index a6a5d2ca..7b41b3fd 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/loading.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/loading.tsx
@@ -1,58 +1,67 @@
 import { Skeleton } from '@/components/ui/skeleton'
 import { Card } from '@/components/ui/card'
 
-const Loading = () => {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto px-6 py-8">
-        {/* Header */}
-        <div className="text-center mb-8">
-          <Skeleton className="h-9 w-48 mx-auto mb-2" />
-          <Skeleton className="h-5 w-64 mx-auto" />
+const TemplateCardSkeleton = () => (
+    <Card className="overflow-hidden shadow-none sm:shadow-none relative">
+        <Skeleton className="absolute top-2 left-2 h-6 w-20 rounded-full z-40" />
+        <img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
+        <div className="p-5">
+            <div className="grid grid-cols-2 gap-2">
+                {Array.from({ length: 4 }).map((_, i) => (
+                    <Skeleton key={i} className="aspect-video rounded" />
+                ))}
+            </div>
         </div>
+        <div className="flex items-center justify-between p-5 bg-white border-t border-[#EDEEEF] relative z-40">
+            <div className="w-[191px]">
+                <Skeleton className="h-4 w-28 mb-2" />
+                <Skeleton className="h-3 w-full mb-1" />
+                <Skeleton className="h-3 w-3/4" />
+            </div>
+            <Skeleton className="h-4 w-4" />
+        </div>
+    </Card>
+)
 
-        {/* Inbuilt Templates Section */}
-        <section className="mb-12">
-          <Skeleton className="h-6 w-40 mb-6" />
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {Array.from({ length: 4 }).map((_, idx) => (
-              <Card key={idx} className="overflow-hidden">
-                <div className="p-5">
-                  <div className="flex items-center justify-between mb-2">
-                    <Skeleton className="h-6 w-28" />
-                    <div className="flex items-center gap-2">
-                      <Skeleton className="h-6 w-8 rounded-full" />
-                      <Skeleton className="h-4 w-4" />
+const Loading = () => {
+    return (
+        <div className="min-h-screen relative font-syne">
+            <div
+                className="fixed z-0 -bottom-[16.5rem] left-0 w-full h-full"
+                style={{
+                    height: '341px',
+                    borderRadius: '1440px',
+                    background: 'radial-gradient(5.92% 104.69% at 50% 100%, rgba(122, 90, 248, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(122, 90, 248, 0.80) 0%, rgba(122, 90, 248, 0.00) 100%)',
+                }}
+            />
+            <div className="sticky top-0 right-0 z-50 py-[28px] px-6 backdrop-blur">
+                <div className="flex xl:flex-row flex-col gap-6 xl:gap-0 items-center justify-between">
+                    <Skeleton className="h-[34px] w-[180px] rounded-lg" />
+                    <div className="flex gap-2.5 max-sm:w-full max-md:justify-center max-sm:flex-wrap">
+                        <Skeleton className="h-[42px] w-[160px] rounded-[48px]" />
                     </div>
-                  </div>
-                  <Skeleton className="h-4 w-full mb-1" />
-                  <Skeleton className="h-4 w-3/4 mb-4" />
-                  <div className="grid grid-cols-2 gap-2">
-                    {Array.from({ length: 4 }).map((_, i) => (
-                      <Skeleton key={i} className="aspect-video rounded" />
-                    ))}
-                  </div>
                 </div>
-              </Card>
-            ))}
-          </div>
-        </section>
+            </div>
 
-        {/* Custom Templates Section */}
-        <section>
-          <div className="flex items-center justify-between mb-6">
-            <Skeleton className="h-6 w-48" />
-            <Skeleton className="h-10 w-44 rounded-md" />
-          </div>
-          <div className="flex items-center justify-center py-12">
-            <Skeleton className="h-8 w-8 rounded-full" />
-            <Skeleton className="h-5 w-48 ml-3" />
-          </div>
-        </section>
-      </div>
-    </div>
-  )
+            <div className="mx-auto px-6 py-8">
+                <div className="p-1 rounded-[40px] bg-[#ffffff] w-fit border border-[#EDEEEF] flex items-center justify-center">
+                    <Skeleton className="h-8 w-20 rounded-[70px]" />
+                    <svg xmlns="http://www.w3.org/2000/svg" className="mx-1" width="2" height="17" viewBox="0 0 2 17" fill="none">
+                        <path d="M1 0V16.5" stroke="#EDECEC" strokeWidth="2" />
+                    </svg>
+                    <Skeleton className="h-8 w-20 rounded-[70px]" />
+                </div>
+
+                <section className="my-12">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                        {Array.from({ length: 4 }).map((_, idx) => (
+                            <TemplateCardSkeleton key={idx} />
+                        ))}
+                    </div>
+                </section>
+            </div>
+        </div>
+    )
 }
 
 export default Loading
-
diff --git a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/loading.tsx b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/loading.tsx
index 39a7bb57..4b7e0cff 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/loading.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/loading.tsx
@@ -1,23 +1,20 @@
 import { Skeleton } from '@/components/ui/skeleton'
 
 const ThemeCardSkeleton = () => (
-    <div className="rounded-xl px-6 border border-[#EDEEEF] w-[305px] bg-white overflow-hidden">
-        {/* Preview area */}
-        <div className="relative h-[250px] p-6">
-            {/* Top badges */}
-            <div className="absolute top-2 left-2 flex items-center gap-2 z-10">
+    <div className="rounded-xl border w-[305px] bg-white border-[#EDEEEF]">
+        <div className="relative h-[250px] flex justify-center items-center">
+            <img src="/card_bg.svg" alt="" className="absolute top-0 z-[1] left-0 w-[99%] h-full object-cover" />
+            <div className="absolute top-0 left-0 flex items-center gap-2 z-[2] p-2">
                 <Skeleton className="h-6 w-16 rounded-full" />
                 <Skeleton className="h-6 w-20 rounded-full" />
             </div>
-            {/* Card preview */}
-            <div className="h-full flex items-center justify-center">
+            <div className="relative z-[3] px-6 w-full">
                 <div className="w-full h-[135px] rounded-xl overflow-hidden">
                     <Skeleton className="w-full h-full" />
                 </div>
             </div>
         </div>
-        {/* Bottom info */}
-        <div className="px-5 border-t border-[#EDEEEF] py-2.5 h-[80px] flex items-center justify-between">
+        <div className="px-5 border-t rounded-b-xl border-[#EDEEEF] w-full py-2.5 h-[80px] bg-white flex items-center justify-between">
             <div>
                 <Skeleton className="h-4 w-24 mb-2" />
                 <div className="flex items-center gap-1">
@@ -32,15 +29,20 @@ const ThemeCardSkeleton = () => (
 
 const Loading = () => {
     return (
-        <div className="space-y-6">
-            {/* Tabs skeleton */}
+        <div className="space-y-6 px-6 font-syne">
+            <div className="py-[28px] flex justify-between">
+                <Skeleton className="h-[34px] w-[140px] rounded-lg" />
+                <Skeleton className="h-[42px] w-[140px] rounded-[48px]" />
+            </div>
+
             <div className="p-1 rounded-[40px] bg-[#F7F6F9] w-fit border border-[#F4F4F4] flex items-center justify-center">
                 <Skeleton className="h-8 w-20 rounded-[70px]" />
-                <div className="mx-1 w-[2px] h-[17px] bg-[#EDECEC]" />
+                <svg xmlns="http://www.w3.org/2000/svg" className="mx-1" width="2" height="17" viewBox="0 0 2 17" fill="none">
+                    <path d="M1 0V16.5" stroke="#EDECEC" strokeWidth="2" />
+                </svg>
                 <Skeleton className="h-8 w-20 rounded-[70px]" />
             </div>
 
-            {/* Theme cards grid */}
             <div className="flex flex-wrap gap-6">
                 {Array.from({ length: 4 }).map((_, idx) => (
                     <ThemeCardSkeleton key={idx} />
@@ -51,4 +53,3 @@ const Loading = () => {
 }
 
 export default Loading
-