modified: src/App.jsx

modified:   src/components/AppShell.jsx
modified:   src/components/Brand.jsx
modified:   src/index.css
modified:   src/pages/MedicalRecordsPage.jsx
modified:   src/pages/PatientsPage.jsx
modified:   src/pages/ReportsPage.jsx
modified:   src/pages/SettingsPage.jsx
modified:   src/repositories/authRepository.js
modified:   src/repositories/professionalRepository.js
modified:   src/repositories/repositoryUtils.js
modified:   src/repositories/settingsRepository.js
modified:   src/utils/theme.js

src/pages/MedicalRecordsPage.jsx

@@ -575,25 +575,18 @@ function PatientPickList({ items, onSelect, selectedId }) {
 }
 
 function PatientReportHistory({ fallbackReports = [], patientId, patientName }) {
-  const [reports, setReports] = useState(fallbackReports)
-  const [loading, setLoading] = useState(Boolean(patientId))
+  const [reportState, setReportState] = useState({ patientId: '', reports: [] })
+  const reports = patientId && reportState.patientId === patientId ? reportState.reports : fallbackReports
+  const loading = Boolean(patientId && reportState.patientId !== patientId)
 
   useEffect(() => {
+    if (!patientId) return undefined
+
     let active = true
 
-    if (!patientId) {
-      setReports(fallbackReports)
-      setLoading(false)
-      return () => {
-        active = false
-      }
-    }
-
-    setLoading(true)
     loadReportsForPatient(patientId, patientName).then((data) => {
       if (!active) return
-      setReports(data.length ? data : fallbackReports)
-      setLoading(false)
+      setReportState({ patientId, reports: data.length ? data : fallbackReports })
     })
 
     return () => {