From e9ef970d48a5cc67b38415aff13d6e6823a52b9d Mon Sep 17 00:00:00 2001
From: Tatjana <malina91983@gmail.com>
Date: Thu, 23 Apr 2026 21:24:45 +0200
Subject: [PATCH] fix: add loading indicator and empty state for activity log,
 warn on unsaved changes

---
 frontend/src/pages/CaseDetail.jsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/CaseDetail.jsx b/frontend/src/pages/CaseDetail.jsx
index a3e67cb..28dfe5b 100644
--- a/frontend/src/pages/CaseDetail.jsx
+++ b/frontend/src/pages/CaseDetail.jsx
@@ -414,15 +414,27 @@ const CaseDetail = ({ caseData, onBack, onGoToPet, currentUserId, userRole, onDi
 
                     <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm text-left">
                         <h3 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-6 border-b pb-2 italic text-left">Logg & Historik</h3>
-                        <div className="space-y-6 relative before:absolute before:left-3 before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-100">
-                            {timeline.filter(item => item.type === 'ACTIVITY').map((log) => (
-                                <div key={log.id} className="relative pl-8 text-left">
-                                    <div className="absolute left-1.5 top-1.5 w-3 h-3 rounded-full bg-slate-300 border-2 border-white ring-4 ring-slate-50"></div>
-                                    <p className="text-[11px] font-bold text-slate-800 italic leading-tight text-left">{log.description}</p>
-                                    <p className="text-[9px] text-slate-400 font-bold uppercase mt-1 italic tracking-tighter text-left">{new Date(log.createdAt).toLocaleString('sv-SE')}</p>
+                        {loading ? (
+                            <div className="flex items-center gap-2 text-slate-400 py-2">
+                                <div className="w-4 h-4 border-2 border-slate-200 border-t-blue-400 rounded-full animate-spin"></div>
+                                <span className="text-[10px] font-bold uppercase tracking-widest italic">Laddar...</span>
+                            </div>
+                        ) : (() => {
+                            const activityLogs = timeline.filter(item => item.type === 'ACTIVITY');
+                            return activityLogs.length === 0 ? (
+                                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest italic py-2">Ingen aktivitet ännu</p>
+                            ) : (
+                                <div className="space-y-6 relative before:absolute before:left-3 before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-100">
+                                    {activityLogs.map((log) => (
+                                        <div key={log.id} className="relative pl-8 text-left">
+                                            <div className="absolute left-1.5 top-1.5 w-3 h-3 rounded-full bg-slate-300 border-2 border-white ring-4 ring-slate-50"></div>
+                                            <p className="text-[11px] font-bold text-slate-800 italic leading-tight text-left">{log.description}</p>
+                                            <p className="text-[9px] text-slate-400 font-bold uppercase mt-1 italic tracking-tighter text-left">{new Date(log.createdAt).toLocaleString('sv-SE')}</p>
+                                        </div>
+                                    ))}
                                 </div>
-                            ))}
-                        </div>
+                            );
+                        })()}
                     </div>
                 </div>
             </div>