From 756c9b892f79e518c56b983870647abb47e8e198 Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Wed, 2 Jul 2025 08:59:45 +0530
Subject: [PATCH] feat(suspense-fallback): replace Spin with Skeleton for
 improved loading experience

- Updated the SuspenseFallback component to use Ant Design's Skeleton instead of Spin for a more visually appealing loading state.
- Enhanced the layout with padding and responsive width settings for better presentation.
- Adjusted InlineSuspenseFallback to implement similar Skeleton loading structure, improving consistency across components.
---
 .../suspense-fallback/suspense-fallback.tsx   | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx b/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
index 4f346af0..63ef5a56 100644
--- a/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
+++ b/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
-import { Spin } from 'antd';
+import { Skeleton } from 'antd';
 
-// Lightweight loading component - removed heavy theme calculations
+// Lightweight loading component with skeleton animation
 export const SuspenseFallback = memo(() => {
   return (
     <div 
@@ -16,9 +16,16 @@ export const SuspenseFallback = memo(() => {
         justifyContent: 'center',
         background: 'transparent',
         zIndex: 9999,
+        padding: '20px',
       }}
     >
-      <Spin size="large" />
+      <div style={{ width: '100%', maxWidth: '400px' }}>
+        <Skeleton 
+          active 
+          paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
+          title={{ width: '70%' }}
+        />
+      </div>
     </div>
   );
 });
@@ -35,7 +42,13 @@ export const InlineSuspenseFallback = memo(() => {
         minHeight: '200px',
       }}
     >
-      <Spin size="large" />
+      <div style={{ width: '100%', maxWidth: '300px' }}>
+        <Skeleton 
+          active 
+          paragraph={{ rows: 2, width: ['100%', '70%'] }}
+          title={{ width: '60%' }}
+        />
+      </div>
     </div>
   );
 });