Move all the Skeletons to seperate file

public/locale/en.json

@@ -378,6 +378,7 @@
   "all_patients": "All Patients",
   "allergen": "Allergen",
   "allergies": "Allergies",
+  "allergies_empty_message": "No allergies recorded",
   "allow_transfer": "Allow Transfer",
   "allowed_formats_are": "Allowed formats are",
   "already_a_member": "Already a member?",
@@ -756,6 +757,7 @@
   "diagnosis__unconfirmed": "Unconfirmed",
   "diagnosis_already_added": "This diagnosis was already added",
   "diagnosis_at_discharge": "Diagnosis at Discharge",
+  "diagnosis_empty_message": "No diagnoses recorded",
   "diastolic": "Diastolic",
   "didnt_receive_a_message": "Didn't receive a message?",
   "differential": "Differential",
@@ -1962,6 +1964,7 @@
   "switch_bed": "Switch Bed",
   "switch_camera_is_not_available": "Switch camera is not available.",
   "symptoms": "Symptoms",
+  "symptoms_empty_message": "No symptoms recorded",
   "systolic": "Systolic",
   "tachycardia": "Tachycardia",
   "tag_name": "Tag Name",

src/components/Common/SkeletonComponents.tsx.tsx

@@ -0,0 +1,159 @@
+import { useTranslation } from "react-i18next";
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+import Page from "@/components/Common/Page";
+
+export const EncounterListSkeleton = () => {
+  return (
+    <>
+      {Array.from({ length: 6 }).map((_, i) => (
+        <Card key={i} className="hover:shadow-lg transition-shadow">
+          <CardHeader className="space-y-1">
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-6 w-32" />
+              <Skeleton className="h-5 w-16" />
+            </div>
+            <Skeleton className="h-4 w-24" />
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col space-y-2">
+              <div className="flex items-center justify-between">
+                <Skeleton className="h-4 w-12" />
+                <Skeleton className="h-5 w-20" />
+              </div>
+              <div className="flex items-center justify-between">
+                <Skeleton className="h-4 w-12" />
+                <Skeleton className="h-4 w-24" />
+              </div>
+              <Separator className="my-2" />
+              <div className="flex justify-end">
+                <Skeleton className="h-4 w-24" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </>
+  );
+};
+
+export const FacilityOrganizationSkeleton = () => {
+  return (
+    <div className="px-6 py-6 space-y-6">
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-8 w-48 self-end" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Card key={i} className="relative space-y-4">
+            <CardHeader>
+              <Skeleton className="h-6 w-1/3" />
+              <Skeleton className="h-4 w-1/4" />
+            </CardHeader>
+            <CardFooter>
+              <Skeleton className="h-10 w-full" />
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const MessageSkeleton = () => (
+  <div className="space-y-4">
+    {Array.from({ length: 3 }).map((_, i) => (
+      <div key={i} className="p-4 rounded-lg bg-gray-100 animate-pulse">
+        <div className="flex items-start gap-3">
+          <div className="w-8 h-8 rounded-full bg-gray-200" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export const OrganizationIndexSkeleton = () => {
+  const { t } = useTranslation();
+  return (
+    <Page title={t("organizations")}>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Card key={i} className="relative">
+            <CardHeader>
+              <Skeleton className="h-6 w-2/3" />
+              <Skeleton className="h-4 w-1/2" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-4 w-full mb-2" />
+              <Skeleton className="h-4 w-3/4" />
+            </CardContent>
+            <CardFooter>
+              <Skeleton className="h-8 w-24" />
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </Page>
+  );
+};
+
+export const OrganizationLayoutSkeleton = () => {
+  return (
+    <div className="p-4">
+      <Skeleton className="h-8 w-48 mb-4" />
+      <Skeleton className="h-4 w-24 mb-4" />
+      <div className="flex space-x-4 mb-4">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <Skeleton key={index} className="h-8 w-24" />
+        ))}
+      </div>
+      <Skeleton className="h-6 w-40 mb-4" />
+      <Skeleton className="h-8 w-1/4 mb-4" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Card key={i}>
+            <CardContent className="p-6">
+              <div className="flex space-x-4">
+                <div className="flex-1 space-y-4">
+                  <Skeleton className="h-6 w-1/2" />
+                  <div className="flex space-x-4">
+                    <Skeleton className="h-4 w-1/3" />
+                    <Skeleton className="h-4 w-1/3" />
+                  </div>
+                </div>
+                <div className="flex-1 flex items-center justify-center">
+                  <Skeleton className="h-6 w-1/2" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const PatientListSkeleton = ({ title }: { title: string }) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="h-[100px] w-full" />
+      </CardContent>
+    </Card>
+  );
+};

src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx

@@ -148,7 +148,7 @@ export default function QuestionnaireResponsesList({ encounter }: Props) {
 
             <PaginatedList.WhenLoading>
               <div className="grid gap-4">
-                {[1, 2, 3].map((i) => (
+                {Array.from({ length: 3 }).map((_, i) => (
                   <Card
                     key={i}
                     className="flex items-center justify-between p-4"

src/components/Patient/PatientDetailsTab/patientUpdates.tsx

@@ -48,7 +48,7 @@ export const Updates = (props: PatientProps) => {
 
               <PaginatedList.WhenLoading>
                 <div className="grid gap-4">
-                  {[1, 2, 3].map((i) => (
+                  {Array.from({ length: 3 }).map((_, i) => (
                     <Card
                       key={i}
                       className="flex items-center justify-between p-4"

src/components/Patient/allergy/list.tsx

@@ -1,9 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
   TableBody,
@@ -14,6 +13,7 @@ import {
 } from "@/components/ui/table";
 
 import { Avatar } from "@/components/Common/Avatar";
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
@@ -25,6 +25,7 @@ interface AllergyListProps {
 }
 
 export function AllergyList({ patientId, encounterId }: AllergyListProps) {
+  const { t } = useTranslation();
   const { data: allergies, isLoading } = useQuery({
     queryKey: ["allergies", patientId, encounterId],
     queryFn: query(allergyIntoleranceApi.getAllergy, {
@@ -34,26 +35,19 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
   });
 
   if (isLoading) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Allergies</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="h-[100px] w-full" />
-        </CardContent>
-      </Card>
-    );
+    return <PatientListSkeleton title={t("allergies")} />;
   }
 
   if (!allergies?.results?.length) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>Allergies</CardTitle>
+          <CardTitle>{t("allergies")}</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">No allergies recorded</p>
+          <p className="text-muted-foreground">
+            {t("allergies_empty_message")}
+          </p>
         </CardContent>
       </Card>
     );

src/components/Patient/diagnosis/list.tsx

@@ -1,7 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import diagnosisApi from "@/types/emr/diagnosis/diagnosisApi";
@@ -14,6 +16,8 @@ interface DiagnosisListProps {
 }
 
 export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
+  const { t } = useTranslation();
+
   const { data: diagnoses, isLoading } = useQuery({
     queryKey: ["diagnosis", patientId, encounterId],
     queryFn: query(diagnosisApi.listDiagnosis, {
@@ -23,26 +27,19 @@ export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
   });
 
   if (isLoading) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Diagnoses</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="h-[100px] w-full" />
-        </CardContent>
-      </Card>
-    );
+    return <PatientListSkeleton title={t("diagnosis")} />;
   }
 
   if (!diagnoses?.results?.length) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>Diagnoses</CardTitle>
+          <CardTitle>{t("diagnosis")}</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">No diagnoses recorded</p>
+          <p className="text-muted-foreground">
+            {t("diagnosis_empty_message")}
+          </p>
         </CardContent>
       </Card>
     );
@@ -51,7 +48,7 @@ export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
   return (
     <Card className="p-0">
       <CardHeader className="px-4 py-0 pt-4">
-        <CardTitle>Diagnoses</CardTitle>
+        <CardTitle>{t("diagnosis")}</CardTitle>
       </CardHeader>
       <CardContent className="p-2">
         <DiagnosisTable diagnoses={diagnoses.results} />

src/components/Patient/symptoms/list.tsx

@@ -1,7 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import symptomApi from "@/types/emr/symptom/symptomApi";
@@ -14,6 +16,8 @@ interface SymptomsListProps {
 }
 
 export function SymptomsList({ patientId, encounterId }: SymptomsListProps) {
+  const { t } = useTranslation();
+
   const { data: symptoms, isLoading } = useQuery({
     queryKey: ["symptoms", patientId, encounterId],
     queryFn: query(symptomApi.listSymptoms, {
@@ -23,26 +27,17 @@ export function SymptomsList({ patientId, encounterId }: SymptomsListProps) {
   });
 
   if (isLoading) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Symptoms</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="h-[100px] w-full" />
-        </CardContent>
-      </Card>
-    );
+    return <PatientListSkeleton title={t("symptoms")} />;
   }
 
   if (!symptoms?.results?.length) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>Symptoms</CardTitle>
+          <CardTitle>{t("symptoms")}</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">No symptoms recorded</p>
+          <p className="text-muted-foreground">{t("symptoms_empty_message")}</p>
         </CardContent>
       </Card>
     );