From b97a7d9f6f6fbb550b501364d470108c01d1d2e2 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <rich.griffiths89@gmail.com>
Date: Wed, 27 Nov 2024 16:37:28 +0000
Subject: [PATCH 1/2] Image placeholder added

---
 next_frontend/components/cases/CaseCard.tsx | 27 ++++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/next_frontend/components/cases/CaseCard.tsx b/next_frontend/components/cases/CaseCard.tsx
index 8e59c97a..aff6f9eb 100644
--- a/next_frontend/components/cases/CaseCard.tsx
+++ b/next_frontend/components/cases/CaseCard.tsx
@@ -12,11 +12,12 @@ import {
 // import { AssuranceCase } from '@/types'
 import Link from 'next/link'
 import moment from 'moment'
-import { Eye, MessageCircleMore, PencilRuler, ScanEye, Trash2 } from 'lucide-react'
+import { Eye, Loader2, MessageCircleMore, PencilRuler, ScanEye, Trash2 } from 'lucide-react'
 import { AlertModal } from '@/components/modals/alertModal'
 import { useParams, useRouter } from 'next/navigation'
 import { useLoginToken } from '@/hooks/useAuth'
 import Image from 'next/image'
+import { Skeleton } from '../ui/skeleton'
 
 interface CaseCardProps {
   assuranceCase: any
@@ -31,6 +32,7 @@ const CaseCard = ({ assuranceCase } : CaseCardProps) => {
   const [open, setOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const [imgSrc, setImgSrc] = useState('');
+  const [imageLoading, setImageLoading] = useState<boolean>(true);
   // const [imgSrc, setImgSrc] = useState(`https://teamedia.blob.core.windows.net/sample-container/chart-screenshot-case-${assuranceCase.id}.png`);
   // const [imageExists, setImageExists] = useState(true)
   // const [imageUrl, setImageUrl] = useState<string>('')
@@ -81,6 +83,8 @@ const CaseCard = ({ assuranceCase } : CaseCardProps) => {
       setImgSrc(result.image)
     } catch (error) {
       console.log('Failed to fetch image')
+    } finally {
+      setImageLoading(false)
     }
   }
 
@@ -93,15 +97,20 @@ const CaseCard = ({ assuranceCase } : CaseCardProps) => {
       <Link href={`/case/${assuranceCase.id}`}>
         <Card className='flex flex-col justify-start items-start group-hover:bg-indigo-500/5 transition-all h-full'>
           <CardHeader className='flex-1 w-full'>
-            <div className='relative flex aspect-video rounded-md mb-4 overflow-hidden'>
-              {imgSrc && (
-                <Image
-                  src={imgSrc}
-                  alt={`Assurance Case ${assuranceCase.name} screenshot`}
-                  fill
-                />
+            {imageLoading ? 
+              (
+                <Skeleton className="relative flex aspect-video rounded-md mb-4 overflow-hidden" />
+              ) : (
+                <div className='relative flex aspect-video rounded-md mb-4 overflow-hidden'>
+                  {imgSrc && (
+                    <Image
+                      src={imgSrc}
+                      alt={`Assurance Case ${assuranceCase.name} screenshot`}
+                      fill
+                    />
+                  )}
+                </div>
               )}
-            </div>
             <CardTitle>{name}</CardTitle>
             <CardDescription className='text-slate-900 dark:text-white'>{description}</CardDescription>
           </CardHeader>

From f42fc3c0dc0b944db54c3c27d7c24276dda9eb9e Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:38:29 +0000
Subject: [PATCH 2/2] style: pre-commit fixes

---
 next_frontend/components/cases/CaseCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next_frontend/components/cases/CaseCard.tsx b/next_frontend/components/cases/CaseCard.tsx
index aff6f9eb..20f214b0 100644
--- a/next_frontend/components/cases/CaseCard.tsx
+++ b/next_frontend/components/cases/CaseCard.tsx
@@ -97,7 +97,7 @@ const CaseCard = ({ assuranceCase } : CaseCardProps) => {
       <Link href={`/case/${assuranceCase.id}`}>
         <Card className='flex flex-col justify-start items-start group-hover:bg-indigo-500/5 transition-all h-full'>
           <CardHeader className='flex-1 w-full'>
-            {imageLoading ? 
+            {imageLoading ?
               (
                 <Skeleton className="relative flex aspect-video rounded-md mb-4 overflow-hidden" />
               ) : (