From 59d74f3cf32c2d84743291a9399ffb163d14d783 Mon Sep 17 00:00:00 2001
From: Tatjana <malina91983@gmail.com>
Date: Thu, 23 Apr 2026 21:41:06 +0200
Subject: [PATCH 1/2] fix: fetch pet records directly inPetDetail instead of
 relying on cached App state

---
 frontend/src/App.jsx             |  1 -
 frontend/src/pages/PetDetail.jsx | 23 ++++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 633862c..0c635c3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -195,7 +195,6 @@ function App() {
                 return (
                     <PetDetail
                         pet={selectedPet}
-                        petRecords={myRecords.filter(r => (r.petId || r.pet?.id) === selectedPet?.id)}
                         onBack={goBackToDashboard}
                         onRegisterCase={(pet) => { setSelectedPet(pet); setCurrentView('create-case'); }}
                         onCaseClick={handleCaseClick}
diff --git a/frontend/src/pages/PetDetail.jsx b/frontend/src/pages/PetDetail.jsx
index 7bf7014..3174923 100644
--- a/frontend/src/pages/PetDetail.jsx
+++ b/frontend/src/pages/PetDetail.jsx
@@ -1,7 +1,19 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { STATUS_MAP } from '../utils/statusHelper';
+import { medicalRecordService } from '../services/api';
 
-const PetDetail = ({ pet, petRecords = [], onBack, onRegisterCase, onCaseClick }) => {
+const PetDetail = ({ pet, onBack, onRegisterCase, onCaseClick }) => {
+    const [petRecords, setPetRecords] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (!pet?.id) return;
+        setLoading(true);
+        medicalRecordService.getRecordsByPet(pet.id)
+            .then(res => setPetRecords(res.data))
+            .catch(() => setPetRecords([]))
+            .finally(() => setLoading(false));
+    }, [pet?.id]);
 
     if (!pet) {
         return <div className="p-10 text-center italic text-slate-400">Ingen djurdata hittades.</div>;
@@ -66,7 +78,12 @@ const PetDetail = ({ pet, petRecords = [], onBack, onRegisterCase, onCaseClick }
                     </h2>
 
                     <div className="space-y-4">
-                        {Array.isArray(petRecords) && petRecords.length > 0 ? (
+                        {loading ? (
+                            <div className="flex items-center gap-2 text-slate-400 py-4">
+                                <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>
+                        ) : Array.isArray(petRecords) && petRecords.length > 0 ? (
                             petRecords.map(record => {
                                 const statusKey = record?.status;
                                 const statusConfig = (STATUS_MAP && STATUS_MAP[statusKey]) || {

From e038f396181b674b73fe4e208318d4d229d91de6 Mon Sep 17 00:00:00 2001
From: Tatjana <malina91983@gmail.com>
Date: Thu, 23 Apr 2026 21:48:39 +0200
Subject: [PATCH 2/2] fix: prevent spinner hang and stale response race in
 PetDetail

---
 frontend/src/pages/PetDetail.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/PetDetail.jsx b/frontend/src/pages/PetDetail.jsx
index 3174923..ee45885 100644
--- a/frontend/src/pages/PetDetail.jsx
+++ b/frontend/src/pages/PetDetail.jsx
@@ -7,12 +7,17 @@ const PetDetail = ({ pet, onBack, onRegisterCase, onCaseClick }) => {
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
-        if (!pet?.id) return;
+        if (!pet?.id) {
+            setLoading(false);
+            return;
+        }
+        let cancelled = false;
         setLoading(true);
         medicalRecordService.getRecordsByPet(pet.id)
-            .then(res => setPetRecords(res.data))
-            .catch(() => setPetRecords([]))
-            .finally(() => setLoading(false));
+            .then(res => { if (!cancelled) setPetRecords(res.data); })
+            .catch(() => { if (!cancelled) setPetRecords([]); })
+            .finally(() => { if (!cancelled) setLoading(false); });
+        return () => { cancelled = true; };
     }, [pet?.id]);
 
     if (!pet) {