From ab876f33b15a05a71e08c4b8413928e625c50907 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 12:09:29 +0530
Subject: [PATCH 01/26] move to skeleton file

---
 public/locale/en.json                         |   3 +
 src/components/Common/UseSkeletons.tsx        | 144 ++++++++++++++++++
 src/components/Patient/allergy/list.tsx       |  22 +--
 src/components/Patient/diagnosis/list.tsx     |  25 ++-
 src/components/Patient/symptoms/list.tsx      |  21 +--
 src/pages/Encounters/EncounterList.tsx        |  41 +----
 .../FacilityOrganizationIndex.tsx             |  22 +--
 src/pages/Organization/OrganizationIndex.tsx  |  24 +--
 .../components/OrganizationLayout.tsx         |  37 +----
 9 files changed, 182 insertions(+), 157 deletions(-)
 create mode 100644 src/components/Common/UseSkeletons.tsx

diff --git a/public/locale/en.json b/public/locale/en.json
index a8211b379a4..30985f26bb1 100644
--- a/public/locale/en.json
+++ b/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",
diff --git a/src/components/Common/UseSkeletons.tsx b/src/components/Common/UseSkeletons.tsx
new file mode 100644
index 00000000000..a5520fe22c6
--- /dev/null
+++ b/src/components/Common/UseSkeletons.tsx
@@ -0,0 +1,144 @@
+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";
+
+// import { CardTitle, CardDescription } from "@/components/ui/card";
+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 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(4)].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>
+  );
+};
diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
index 456f61c759e..762ae581812 100644
--- a/src/components/Patient/allergy/list.tsx
+++ b/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/UseSkeletons";
 
 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>
     );
diff --git a/src/components/Patient/diagnosis/list.tsx b/src/components/Patient/diagnosis/list.tsx
index 0df139f098f..34f928da165 100644
--- a/src/components/Patient/diagnosis/list.tsx
+++ b/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/UseSkeletons";
 
 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} />
diff --git a/src/components/Patient/symptoms/list.tsx b/src/components/Patient/symptoms/list.tsx
index 20914788f00..db2c5467db3 100644
--- a/src/components/Patient/symptoms/list.tsx
+++ b/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/UseSkeletons";
 
 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>
     );
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 0313591dc93..56e36bb0b02 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -30,11 +30,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
+import { EncounterListSkeleton } from "@/components/Common/UseSkeletons";
 
 import useFilters from "@/hooks/useFilters";
 
@@ -100,36 +100,6 @@ const buildQueryParams = (
   return params;
 };
 
-function EncounterCardSkeleton() {
-  return (
-    <Card 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>
-  );
-}
-
 function EmptyState() {
   return (
     <Card className="flex flex-col items-center justify-center p-8 text-center border-dashed">
@@ -696,14 +666,7 @@ export function EncounterList({
 
         <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           {isLoading ? (
-            <>
-              <EncounterCardSkeleton />
-              <EncounterCardSkeleton />
-              <EncounterCardSkeleton />
-              <EncounterCardSkeleton />
-              <EncounterCardSkeleton />
-              <EncounterCardSkeleton />
-            </>
+            <EncounterListSkeleton />
           ) : encounters.length === 0 ? (
             <div className="col-span-full">
               <EmptyState />
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index 81a3dc4042a..62e8df0ebf6 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -13,9 +13,9 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
+import { FacilityOrganizationSkeleton } from "@/components/Common/UseSkeletons";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -38,25 +38,7 @@ export default function FacilityOrganizationIndex({
   });
 
   if (isLoading) {
-    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>
-    );
+    return <FacilityOrganizationSkeleton />;
   }
 
   if (!data?.results?.length) {
diff --git a/src/pages/Organization/OrganizationIndex.tsx b/src/pages/Organization/OrganizationIndex.tsx
index 1719b70caab..441028cfbd9 100644
--- a/src/pages/Organization/OrganizationIndex.tsx
+++ b/src/pages/Organization/OrganizationIndex.tsx
@@ -12,9 +12,9 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
+import { OrganizationIndexSkeleton } from "@/components/Common/UseSkeletons";
 
 import query from "@/Utils/request/query";
 import {
@@ -30,27 +30,7 @@ export default function OrganizationIndex() {
   });
 
   if (isLoading) {
-    return (
-      <Page title="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>
-    );
+    return <OrganizationIndexSkeleton />;
   }
 
   if (!data?.results?.length) {
diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
index b2ebf3b6e22..35be3b75397 100644
--- a/src/pages/Organization/components/OrganizationLayout.tsx
+++ b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -12,11 +12,10 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-import { Card, CardContent } from "@/components/ui/card";
 import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
-import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
+import { OrganizationIndexSkeleton } from "@/components/Common/UseSkeletons";
 
 import query from "@/Utils/request/query";
 import { usePermissions } from "@/context/PermissionContext";
@@ -70,39 +69,7 @@ export default function OrganizationLayout({
   }, [org, setOrganization]);
 
   if (isLoading) {
-    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(4)].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>
-    );
+    return <OrganizationIndexSkeleton />;
   }
   // add loading state
   if (!org) {

From 142a0a42c5bcd2b4be9f9b6293e5a27f02db2f97 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 13:48:53 +0530
Subject: [PATCH 02/26] rm commented code

---
 src/components/Common/UseSkeletons.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Common/UseSkeletons.tsx b/src/components/Common/UseSkeletons.tsx
index a5520fe22c6..47de196ae9a 100644
--- a/src/components/Common/UseSkeletons.tsx
+++ b/src/components/Common/UseSkeletons.tsx
@@ -12,7 +12,6 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
 
-// import { CardTitle, CardDescription } from "@/components/ui/card";
 export const EncounterListSkeleton = () => {
   return (
     <>
@@ -100,7 +99,7 @@ export const OrganizationLayoutSkeleton = () => {
       <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(4)].map((_, index) => (
+        {Array.from({ length: 3 }).map((_, index) => (
           <Skeleton key={index} className="h-8 w-24" />
         ))}
       </div>

From b2578202b5956adc52f554467ebf068ee57b3dc9 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 13:52:53 +0530
Subject: [PATCH 03/26] used Arrays.length

---
 .../Facility/ConsultationDetails/QuestionnaireResponsesList.tsx | 2 +-
 src/components/Patient/PatientDetailsTab/patientUpdates.tsx     | 2 +-
 src/pages/Encounters/tabs/EncounterNotesTab.tsx                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
index 3cbad3a75c6..f5ba591cfe5 100644
--- a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
+++ b/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"
diff --git a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
index b4a2447d841..bb50c83a39b 100644
--- a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
+++ b/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"
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index d8a93b592c5..6f5f65e8b2e 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -72,7 +72,7 @@ const threadTemplates = [
 // Component to display loading skeleton for messages
 const MessageSkeleton = () => (
   <div className="space-y-4">
-    {[1, 2, 3].map((i) => (
+    {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" />

From 612ce21294c0e880e2f9f9b89d8a48da42df23f5 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 14:05:26 +0530
Subject: [PATCH 04/26] message skeleton

---
 src/components/Common/UseSkeletons.tsx        | 16 ++++++++++++++++
 .../Encounters/tabs/EncounterNotesTab.tsx     | 19 +------------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/Common/UseSkeletons.tsx b/src/components/Common/UseSkeletons.tsx
index 47de196ae9a..13fdf606513 100644
--- a/src/components/Common/UseSkeletons.tsx
+++ b/src/components/Common/UseSkeletons.tsx
@@ -68,6 +68,22 @@ export const FacilityOrganizationSkeleton = () => {
   );
 };
 
+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 (
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index 6f5f65e8b2e..53774f750cc 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -34,7 +34,6 @@ import { Input } from "@/components/ui/input";
 import { Markdown } from "@/components/ui/markdown";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
@@ -45,6 +44,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
+import { MessageSkeleton } from "@/components/Common/UseSkeletons";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -69,23 +69,6 @@ const threadTemplates = [
   "Lab Results Discussion",
 ] as const;
 
-// Component to display loading skeleton for messages
-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>
-);
-
 // Info tooltip component for help text
 const InfoTooltip = ({ content }: { content: string }) => (
   <TooltipProvider>

From 8f84571865a7a4143a6588de1886ac03a1958ec7 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 14:46:11 +0530
Subject: [PATCH 05/26] rename file

---
 .../Common/{UseSkeletons.tsx => SkeletonComponents.tsx.tsx}     | 0
 src/components/Patient/allergy/list.tsx                         | 2 +-
 src/components/Patient/diagnosis/list.tsx                       | 2 +-
 src/components/Patient/symptoms/list.tsx                        | 2 +-
 src/pages/Encounters/EncounterList.tsx                          | 2 +-
 src/pages/Encounters/tabs/EncounterNotesTab.tsx                 | 2 +-
 src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx    | 2 +-
 src/pages/Organization/OrganizationIndex.tsx                    | 2 +-
 src/pages/Organization/components/OrganizationLayout.tsx        | 2 +-
 9 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/Common/{UseSkeletons.tsx => SkeletonComponents.tsx.tsx} (100%)

diff --git a/src/components/Common/UseSkeletons.tsx b/src/components/Common/SkeletonComponents.tsx.tsx
similarity index 100%
rename from src/components/Common/UseSkeletons.tsx
rename to src/components/Common/SkeletonComponents.tsx.tsx
diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
index 762ae581812..a35dd43c3da 100644
--- a/src/components/Patient/allergy/list.tsx
+++ b/src/components/Patient/allergy/list.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/table";
 
 import { Avatar } from "@/components/Common/Avatar";
-import { PatientListSkeleton } from "@/components/Common/UseSkeletons";
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
diff --git a/src/components/Patient/diagnosis/list.tsx b/src/components/Patient/diagnosis/list.tsx
index 34f928da165..f2c856020bf 100644
--- a/src/components/Patient/diagnosis/list.tsx
+++ b/src/components/Patient/diagnosis/list.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-import { PatientListSkeleton } from "@/components/Common/UseSkeletons";
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import diagnosisApi from "@/types/emr/diagnosis/diagnosisApi";
diff --git a/src/components/Patient/symptoms/list.tsx b/src/components/Patient/symptoms/list.tsx
index db2c5467db3..d652b2a27a5 100644
--- a/src/components/Patient/symptoms/list.tsx
+++ b/src/components/Patient/symptoms/list.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-import { PatientListSkeleton } from "@/components/Common/UseSkeletons";
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import symptomApi from "@/types/emr/symptom/symptomApi";
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 56e36bb0b02..b57fd177b8a 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -34,7 +34,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
-import { EncounterListSkeleton } from "@/components/Common/UseSkeletons";
+import { EncounterListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import useFilters from "@/hooks/useFilters";
 
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index 53774f750cc..3fc5986df06 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -44,7 +44,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
-import { MessageSkeleton } from "@/components/Common/UseSkeletons";
+import { MessageSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index 62e8df0ebf6..c1c3a553c58 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
-import { FacilityOrganizationSkeleton } from "@/components/Common/UseSkeletons";
+import { FacilityOrganizationSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
diff --git a/src/pages/Organization/OrganizationIndex.tsx b/src/pages/Organization/OrganizationIndex.tsx
index 441028cfbd9..979b9b63d19 100644
--- a/src/pages/Organization/OrganizationIndex.tsx
+++ b/src/pages/Organization/OrganizationIndex.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
-import { OrganizationIndexSkeleton } from "@/components/Common/UseSkeletons";
+import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import {
diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
index 35be3b75397..c5d80fd5fe5 100644
--- a/src/pages/Organization/components/OrganizationLayout.tsx
+++ b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -15,7 +15,7 @@ import {
 import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 
 import Page from "@/components/Common/Page";
-import { OrganizationIndexSkeleton } from "@/components/Common/UseSkeletons";
+import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents.tsx";
 
 import query from "@/Utils/request/query";
 import { usePermissions } from "@/context/PermissionContext";

From 8de764fad3983a6ccd27cbafdb6f7ad1b1624fe5 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 18:03:45 +0530
Subject: [PATCH 06/26] nitpick sugg

---
 .../{SkeletonComponents.tsx.tsx => SkeletonComponents.tsx}      | 0
 src/components/Patient/allergy/list.tsx                         | 2 +-
 src/components/Patient/diagnosis/list.tsx                       | 2 +-
 src/components/Patient/symptoms/list.tsx                        | 2 +-
 src/pages/Encounters/EncounterList.tsx                          | 2 +-
 src/pages/Encounters/tabs/EncounterNotesTab.tsx                 | 2 +-
 src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx    | 2 +-
 src/pages/Organization/OrganizationIndex.tsx                    | 2 +-
 src/pages/Organization/components/OrganizationLayout.tsx        | 2 +-
 9 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/Common/{SkeletonComponents.tsx.tsx => SkeletonComponents.tsx} (100%)

diff --git a/src/components/Common/SkeletonComponents.tsx.tsx b/src/components/Common/SkeletonComponents.tsx
similarity index 100%
rename from src/components/Common/SkeletonComponents.tsx.tsx
rename to src/components/Common/SkeletonComponents.tsx
diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
index a35dd43c3da..7a07170f05d 100644
--- a/src/components/Patient/allergy/list.tsx
+++ b/src/components/Patient/allergy/list.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/table";
 
 import { Avatar } from "@/components/Common/Avatar";
-import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
 import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
diff --git a/src/components/Patient/diagnosis/list.tsx b/src/components/Patient/diagnosis/list.tsx
index f2c856020bf..c726a622382 100644
--- a/src/components/Patient/diagnosis/list.tsx
+++ b/src/components/Patient/diagnosis/list.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
 import diagnosisApi from "@/types/emr/diagnosis/diagnosisApi";
diff --git a/src/components/Patient/symptoms/list.tsx b/src/components/Patient/symptoms/list.tsx
index d652b2a27a5..7cb25a86cf3 100644
--- a/src/components/Patient/symptoms/list.tsx
+++ b/src/components/Patient/symptoms/list.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-import { PatientListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { PatientListSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
 import symptomApi from "@/types/emr/symptom/symptomApi";
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index b57fd177b8a..0bb540f050a 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -34,7 +34,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
-import { EncounterListSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { EncounterListSkeleton } from "@/components/Common/SkeletonComponents";
 
 import useFilters from "@/hooks/useFilters";
 
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index 3fc5986df06..cf44c02cd14 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -44,7 +44,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
-import { MessageSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { MessageSkeleton } from "@/components/Common/SkeletonComponents";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index c1c3a553c58..f064dfc7595 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
-import { FacilityOrganizationSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { FacilityOrganizationSkeleton } from "@/components/Common/SkeletonComponents";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
diff --git a/src/pages/Organization/OrganizationIndex.tsx b/src/pages/Organization/OrganizationIndex.tsx
index 979b9b63d19..83146fabd49 100644
--- a/src/pages/Organization/OrganizationIndex.tsx
+++ b/src/pages/Organization/OrganizationIndex.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
-import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
 import {
diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
index d5e79b9fb1f..feb6419164a 100644
--- a/src/pages/Organization/components/OrganizationLayout.tsx
+++ b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -15,7 +15,7 @@ import {
 import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 
 import Page from "@/components/Common/Page";
-import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents.tsx";
+import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
 import { usePermissions } from "@/context/PermissionContext";

From ce10c1d84f7561b3ff3463f7800e409347abba50 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 20:06:57 +0530
Subject: [PATCH 07/26] reset patient list

---
 src/components/Patient/allergy/list.tsx   | 22 ++++++++++++--------
 src/components/Patient/diagnosis/list.tsx | 25 +++++++++++++----------
 src/components/Patient/symptoms/list.tsx  | 21 +++++++++++--------
 3 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/Patient/allergy/list.tsx b/src/components/Patient/allergy/list.tsx
index 7a07170f05d..456f61c759e 100644
--- a/src/components/Patient/allergy/list.tsx
+++ b/src/components/Patient/allergy/list.tsx
@@ -1,8 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
+import { t } from "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,
@@ -13,7 +14,6 @@ import {
 } from "@/components/ui/table";
 
 import { Avatar } from "@/components/Common/Avatar";
-import { PatientListSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
 import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntolerance";
@@ -25,7 +25,6 @@ interface AllergyListProps {
 }
 
 export function AllergyList({ patientId, encounterId }: AllergyListProps) {
-  const { t } = useTranslation();
   const { data: allergies, isLoading } = useQuery({
     queryKey: ["allergies", patientId, encounterId],
     queryFn: query(allergyIntoleranceApi.getAllergy, {
@@ -35,19 +34,26 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
   });
 
   if (isLoading) {
-    return <PatientListSkeleton title={t("allergies")} />;
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Allergies</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Skeleton className="h-[100px] w-full" />
+        </CardContent>
+      </Card>
+    );
   }
 
   if (!allergies?.results?.length) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t("allergies")}</CardTitle>
+          <CardTitle>Allergies</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">
-            {t("allergies_empty_message")}
-          </p>
+          <p className="text-muted-foreground">No allergies recorded</p>
         </CardContent>
       </Card>
     );
diff --git a/src/components/Patient/diagnosis/list.tsx b/src/components/Patient/diagnosis/list.tsx
index c726a622382..0df139f098f 100644
--- a/src/components/Patient/diagnosis/list.tsx
+++ b/src/components/Patient/diagnosis/list.tsx
@@ -1,9 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-import { PatientListSkeleton } from "@/components/Common/SkeletonComponents";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import query from "@/Utils/request/query";
 import diagnosisApi from "@/types/emr/diagnosis/diagnosisApi";
@@ -16,8 +14,6 @@ interface DiagnosisListProps {
 }
 
 export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
-  const { t } = useTranslation();
-
   const { data: diagnoses, isLoading } = useQuery({
     queryKey: ["diagnosis", patientId, encounterId],
     queryFn: query(diagnosisApi.listDiagnosis, {
@@ -27,19 +23,26 @@ export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
   });
 
   if (isLoading) {
-    return <PatientListSkeleton title={t("diagnosis")} />;
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Diagnoses</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Skeleton className="h-[100px] w-full" />
+        </CardContent>
+      </Card>
+    );
   }
 
   if (!diagnoses?.results?.length) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t("diagnosis")}</CardTitle>
+          <CardTitle>Diagnoses</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">
-            {t("diagnosis_empty_message")}
-          </p>
+          <p className="text-muted-foreground">No diagnoses recorded</p>
         </CardContent>
       </Card>
     );
@@ -48,7 +51,7 @@ export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
   return (
     <Card className="p-0">
       <CardHeader className="px-4 py-0 pt-4">
-        <CardTitle>{t("diagnosis")}</CardTitle>
+        <CardTitle>Diagnoses</CardTitle>
       </CardHeader>
       <CardContent className="p-2">
         <DiagnosisTable diagnoses={diagnoses.results} />
diff --git a/src/components/Patient/symptoms/list.tsx b/src/components/Patient/symptoms/list.tsx
index 7cb25a86cf3..20914788f00 100644
--- a/src/components/Patient/symptoms/list.tsx
+++ b/src/components/Patient/symptoms/list.tsx
@@ -1,9 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-import { PatientListSkeleton } from "@/components/Common/SkeletonComponents";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import query from "@/Utils/request/query";
 import symptomApi from "@/types/emr/symptom/symptomApi";
@@ -16,8 +14,6 @@ interface SymptomsListProps {
 }
 
 export function SymptomsList({ patientId, encounterId }: SymptomsListProps) {
-  const { t } = useTranslation();
-
   const { data: symptoms, isLoading } = useQuery({
     queryKey: ["symptoms", patientId, encounterId],
     queryFn: query(symptomApi.listSymptoms, {
@@ -27,17 +23,26 @@ export function SymptomsList({ patientId, encounterId }: SymptomsListProps) {
   });
 
   if (isLoading) {
-    return <PatientListSkeleton title={t("symptoms")} />;
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Symptoms</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Skeleton className="h-[100px] w-full" />
+        </CardContent>
+      </Card>
+    );
   }
 
   if (!symptoms?.results?.length) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{t("symptoms")}</CardTitle>
+          <CardTitle>Symptoms</CardTitle>
         </CardHeader>
         <CardContent>
-          <p className="text-muted-foreground">{t("symptoms_empty_message")}</p>
+          <p className="text-muted-foreground">No symptoms recorded</p>
         </CardContent>
       </Card>
     );

From da88720d5d1660caa0f061a831f36674cbdc32d5 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 15 Jan 2025 20:08:31 +0530
Subject: [PATCH 08/26] rm patientlist skeleton

---
 src/components/Common/SkeletonComponents.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/components/Common/SkeletonComponents.tsx b/src/components/Common/SkeletonComponents.tsx
index 13fdf606513..0f088860d3d 100644
--- a/src/components/Common/SkeletonComponents.tsx
+++ b/src/components/Common/SkeletonComponents.tsx
@@ -5,7 +5,6 @@ import {
   CardContent,
   CardFooter,
   CardHeader,
-  CardTitle,
 } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -144,16 +143,3 @@ export const OrganizationLayoutSkeleton = () => {
     </div>
   );
 };
-
-export const PatientListSkeleton = ({ title }: { title: string }) => {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Skeleton className="h-[100px] w-full" />
-      </CardContent>
-    </Card>
-  );
-};

From 47a3cc8c3389285efb2af325ee4f80b3316b5d5e Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Thu, 16 Jan 2025 11:47:25 +0530
Subject: [PATCH 09/26] move to respective seperate files

---
 src/components/Common/SkeletonComponents.tsx  | 145 ------------------
 src/pages/Encounters/EncounterList.tsx        |   2 +-
 .../components/EncounterListSkeleton.tsx      |  37 +++++
 .../components/EncounterNoteSkeleton.tsx      |  19 +++
 .../Encounters/tabs/EncounterNotesTab.tsx     |   6 +-
 .../FacilityOrganizationIndex.tsx             |   2 +-
 .../FacilityOrganizationSkeleton.tsx          |  24 +++
 src/pages/Organization/OrganizationIndex.tsx  |   2 +-
 .../components/OrganizationIndexSkeleton.tsx  |  36 +++++
 .../components/OrganizationLayout.tsx         |   4 +-
 .../components/OrganizationLayoutSkeleton.tsx |  38 +++++
 11 files changed, 162 insertions(+), 153 deletions(-)
 delete mode 100644 src/components/Common/SkeletonComponents.tsx
 create mode 100644 src/pages/Encounters/components/EncounterListSkeleton.tsx
 create mode 100644 src/pages/Encounters/components/EncounterNoteSkeleton.tsx
 create mode 100644 src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
 create mode 100644 src/pages/Organization/components/OrganizationIndexSkeleton.tsx
 create mode 100644 src/pages/Organization/components/OrganizationLayoutSkeleton.tsx

diff --git a/src/components/Common/SkeletonComponents.tsx b/src/components/Common/SkeletonComponents.tsx
deleted file mode 100644
index 0f088860d3d..00000000000
--- a/src/components/Common/SkeletonComponents.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} 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>
-  );
-};
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 0bb540f050a..9a156d356f6 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -34,13 +34,13 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
-import { EncounterListSkeleton } from "@/components/Common/SkeletonComponents";
 
 import useFilters from "@/hooks/useFilters";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
+import EncounterListSkeleton from "@/pages/Encounters/components/EncounterListSkeleton";
 import { Encounter, EncounterPriority } from "@/types/emr/encounter";
 
 interface EncounterListProps {
diff --git a/src/pages/Encounters/components/EncounterListSkeleton.tsx b/src/pages/Encounters/components/EncounterListSkeleton.tsx
new file mode 100644
index 00000000000..c7c3f901585
--- /dev/null
+++ b/src/pages/Encounters/components/EncounterListSkeleton.tsx
@@ -0,0 +1,37 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function 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>
+      ))}
+    </>
+  );
+}
diff --git a/src/pages/Encounters/components/EncounterNoteSkeleton.tsx b/src/pages/Encounters/components/EncounterNoteSkeleton.tsx
new file mode 100644
index 00000000000..d429220d731
--- /dev/null
+++ b/src/pages/Encounters/components/EncounterNoteSkeleton.tsx
@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function EncounterNoteSkeleton() {
+  return (
+    <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>
+  );
+}
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index cf44c02cd14..bcc66ad0c31 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -44,7 +44,6 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
-import { MessageSkeleton } from "@/components/Common/SkeletonComponents";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -53,6 +52,7 @@ import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
 import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
+import EncounterNoteSkeleton from "@/pages/Encounters/components/EncounterNoteSkeleton";
 import { Message } from "@/types/notes/messages";
 import { Thread } from "@/types/notes/threads";
 
@@ -551,7 +551,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
             <>
               {messagesLoading ? (
                 <div className="flex-1 p-4">
-                  <MessageSkeleton />
+                  <EncounterNoteSkeleton />
                 </div>
               ) : (
                 <>
@@ -576,7 +576,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
                       )}
                       {isFetchingNextPage && (
                         <div className="py-2">
-                          <MessageSkeleton />
+                          <EncounterNoteSkeleton />
                         </div>
                       )}
                       <div ref={ref} />
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index f064dfc7595..99587298fd8 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -15,10 +15,10 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
-import { FacilityOrganizationSkeleton } from "@/components/Common/SkeletonComponents";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
+import FacilityOrganizationSkeleton from "@/pages/FacilityOrganization/components/FacilityOrganizationSkeleton";
 import { FacilityOrganization } from "@/types/facilityOrganization/facilityOrganization";
 
 import CreateFacilityOrganizationSheet from "./components/CreateFacilityOrganizationSheet";
diff --git a/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx b/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
new file mode 100644
index 00000000000..5ab9e761303
--- /dev/null
+++ b/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
@@ -0,0 +1,24 @@
+import { Card, CardFooter, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function 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>
+  );
+}
diff --git a/src/pages/Organization/OrganizationIndex.tsx b/src/pages/Organization/OrganizationIndex.tsx
index 83146fabd49..fb7dddd4a59 100644
--- a/src/pages/Organization/OrganizationIndex.tsx
+++ b/src/pages/Organization/OrganizationIndex.tsx
@@ -14,9 +14,9 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
-import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
+import OrganizationIndexSkeleton from "@/pages/Organization/components/OrganizationIndexSkeleton";
 import {
   type Organization,
   getOrgLabel,
diff --git a/src/pages/Organization/components/OrganizationIndexSkeleton.tsx b/src/pages/Organization/components/OrganizationIndexSkeleton.tsx
new file mode 100644
index 00000000000..1b2eb8d3028
--- /dev/null
+++ b/src/pages/Organization/components/OrganizationIndexSkeleton.tsx
@@ -0,0 +1,36 @@
+import { useTranslation } from "react-i18next";
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+import Page from "@/components/Common/Page";
+
+export default function 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>
+  );
+}
diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
index feb6419164a..d899fb6760f 100644
--- a/src/pages/Organization/components/OrganizationLayout.tsx
+++ b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -15,10 +15,10 @@ import {
 import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 
 import Page from "@/components/Common/Page";
-import { OrganizationIndexSkeleton } from "@/components/Common/SkeletonComponents";
 
 import query from "@/Utils/request/query";
 import { usePermissions } from "@/context/PermissionContext";
+import OrganizationLayoutSkeleton from "@/pages/Organization/components/OrganizationLayoutSkeleton";
 import {
   Organization,
   OrganizationParent,
@@ -69,7 +69,7 @@ export default function OrganizationLayout({
   }, [org, setOrganization]);
 
   if (isLoading) {
-    return <OrganizationIndexSkeleton />;
+    return <OrganizationLayoutSkeleton />;
   }
   // add loading state
   if (!org) {
diff --git a/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
new file mode 100644
index 00000000000..2af8bc9ff9c
--- /dev/null
+++ b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
@@ -0,0 +1,38 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function 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>
+  );
+}

From 10d091ef094fdcd5bf7db8d48c619672f229a137 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Thu, 16 Jan 2025 11:56:08 +0530
Subject: [PATCH 10/26] move to Facility user skeletons

---
 src/components/Facility/FacilityUsers.tsx     | 103 +-----------------
 .../Facility/FacilityUsersSkeletons.tsx       |  99 +++++++++++++++++
 2 files changed, 103 insertions(+), 99 deletions(-)
 create mode 100644 src/components/Facility/FacilityUsersSkeletons.tsx

diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
index 696e1d06b9b..a0162e1a754 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -5,12 +5,14 @@ import { useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
+import {
+  UserCardSkeleton,
+  UserListSkeleton,
+} from "@/components/Facility/FacilityUsersSkeletons";
 import UserListAndCardView from "@/components/Users/UserListAndCard";
 
 import useFilters from "@/hooks/useFilters";
@@ -18,103 +20,6 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 
-const UserCardSkeleton = () => (
-  <div>
-    <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="h-full">
-          <CardContent className="p-4 sm:p-6">
-            <div className="flex flex-col h-full gap-4">
-              <div className="flex gap-4">
-                <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
-                <div className="flex flex-col min-w-0 flex-1">
-                  <div className="flex flex-col gap-1">
-                    <Skeleton className="h-5 w-32 mb-1" />
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <Skeleton className="h-4 w-20" />
-                      <Skeleton className="h-4 w-16" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
-                  <Skeleton className="h-4 w-16 mb-1" />
-                  <Skeleton className="h-4 w-24" />
-                </div>
-                <div>
-                  <Skeleton className="h-4 w-24 mb-1" />
-                  <Skeleton className="h-4 w-16" />
-                </div>
-              </div>
-
-              <div className="mt-auto pt-2">
-                <Skeleton className="h-8 w-full rounded-md" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  </div>
-);
-
-const UserListSkeleton = () => (
-  <div className="overflow-x-auto rounded-lg border border-gray-200">
-    <table className="relative min-w-full divide-y divide-gray-200">
-      {/* Header Skeleton */}
-      <thead>
-        <tr>
-          <th className="sticky top-0 z-10 bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-24" />
-          </th>
-          <th className="bg-gray-100 px-6 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-16" />
-          </th>
-          <th className="bg-gray-100 px-10 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-20" />
-          </th>
-          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-24" />
-          </th>
-          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-20" />
-          </th>
-        </tr>
-      </thead>
-      {/* Body Skeleton */}
-      <tbody className="divide-y divide-gray-200 bg-white">
-        {Array.from({ length: 7 }).map((_, i) => (
-          <tr key={i} className="hover:bg-gray-50">
-            <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
-              <div className="flex items-center gap-3">
-                <Skeleton className="h-10 w-10 rounded-full" />
-                <div className="flex flex-col">
-                  <Skeleton className="h-4 w-32 mb-1" />
-                  <Skeleton className="h-3 w-20" />
-                </div>
-              </div>
-            </td>
-            <td className="flex-0 px-6 py-4">
-              <Skeleton className="h-4 w-16" />
-            </td>
-            <td className="px-10 py-4 text-sm">
-              <Skeleton className="h-4 w-20" />
-            </td>
-            <td className="px-4 py-4 text-sm whitespace-nowrap">
-              <Skeleton className="h-4 w-24" />
-            </td>
-            <td className="px-4 py-4">
-              <Skeleton className="h-8 w-20 rounded-md" />
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
-);
-
 export default function FacilityUsers(props: { facilityId: string }) {
   const { t } = useTranslation();
   const { qParams, updateQuery, Pagination } = useFilters({
diff --git a/src/components/Facility/FacilityUsersSkeletons.tsx b/src/components/Facility/FacilityUsersSkeletons.tsx
new file mode 100644
index 00000000000..29776241c3f
--- /dev/null
+++ b/src/components/Facility/FacilityUsersSkeletons.tsx
@@ -0,0 +1,99 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const UserListSkeleton = () => (
+  <div className="overflow-x-auto rounded-lg border border-gray-200">
+    <table className="relative min-w-full divide-y divide-gray-200">
+      {/* Header Skeleton */}
+      <thead>
+        <tr>
+          <th className="sticky top-0 z-10 bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-24" />
+          </th>
+          <th className="bg-gray-100 px-6 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-16" />
+          </th>
+          <th className="bg-gray-100 px-10 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-20" />
+          </th>
+          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-24" />
+          </th>
+          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-20" />
+          </th>
+        </tr>
+      </thead>
+      {/* Body Skeleton */}
+      <tbody className="divide-y divide-gray-200 bg-white">
+        {Array.from({ length: 7 }).map((_, i) => (
+          <tr key={i} className="hover:bg-gray-50">
+            <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
+              <div className="flex items-center gap-3">
+                <Skeleton className="h-10 w-10 rounded-full" />
+                <div className="flex flex-col">
+                  <Skeleton className="h-4 w-32 mb-1" />
+                  <Skeleton className="h-3 w-20" />
+                </div>
+              </div>
+            </td>
+            <td className="flex-0 px-6 py-4">
+              <Skeleton className="h-4 w-16" />
+            </td>
+            <td className="px-10 py-4 text-sm">
+              <Skeleton className="h-4 w-20" />
+            </td>
+            <td className="px-4 py-4 text-sm whitespace-nowrap">
+              <Skeleton className="h-4 w-24" />
+            </td>
+            <td className="px-4 py-4">
+              <Skeleton className="h-8 w-20 rounded-md" />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+export const UserCardSkeleton = () => (
+  <div>
+    <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="h-full">
+          <CardContent className="p-4 sm:p-6">
+            <div className="flex flex-col h-full gap-4">
+              <div className="flex gap-4">
+                <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
+                <div className="flex flex-col min-w-0 flex-1">
+                  <div className="flex flex-col gap-1">
+                    <Skeleton className="h-5 w-32 mb-1" />
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Skeleton className="h-4 w-20" />
+                      <Skeleton className="h-4 w-16" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <Skeleton className="h-4 w-16 mb-1" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+                <div>
+                  <Skeleton className="h-4 w-24 mb-1" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
+              </div>
+
+              <div className="mt-auto pt-2">
+                <Skeleton className="h-8 w-full rounded-md" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  </div>
+);

From 79014f06ebdb176c81cf0c93186f5ec34b061a76 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 15:56:25 +0530
Subject: [PATCH 11/26] use generic skeletonLoading

---
 src/components/Common/SkeletonLoading.tsx     | 208 ++++++++++++++++++
 src/components/Facility/FacilityUsers.tsx     |  20 +-
 .../Facility/FacilityUsersSkeletons.tsx       |  99 ---------
 src/pages/Encounters/EncounterList.tsx        |   4 +-
 .../components/EncounterListSkeleton.tsx      |  37 ----
 .../Organization/OrganizationFacilities.tsx   |  27 +--
 .../Organization/OrganizationPatients.tsx     |  31 +--
 src/pages/Organization/OrganizationUsers.tsx  |  17 +-
 src/pages/Organization/OrganizationView.tsx   |  15 +-
 9 files changed, 235 insertions(+), 223 deletions(-)
 create mode 100644 src/components/Common/SkeletonLoading.tsx
 delete mode 100644 src/components/Facility/FacilityUsersSkeletons.tsx
 delete mode 100644 src/pages/Encounters/components/EncounterListSkeleton.tsx

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
new file mode 100644
index 00000000000..0dfb281a431
--- /dev/null
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -0,0 +1,208 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const UserListSkeleton = () => (
+  //   <div className="overflow-x-auto rounded-lg border border-gray-200">
+  //     <table className="relative min-w-full divide-y divide-gray-200">
+
+  <tr className="hover:bg-gray-50">
+    <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="flex flex-col">
+          <Skeleton className="h-4 w-32 mb-1" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      </div>
+    </td>
+    <td className="flex-0 px-6 py-4">
+      <Skeleton className="h-4 w-16" />
+    </td>
+    <td className="px-10 py-4 text-sm">
+      <Skeleton className="h-4 w-20" />
+    </td>
+    <td className="px-4 py-4 text-sm whitespace-nowrap">
+      <Skeleton className="h-4 w-24" />
+    </td>
+    <td className="px-4 py-4">
+      <Skeleton className="h-8 w-20 rounded-md" />
+    </td>
+  </tr>
+);
+
+const UserCardSkeleton = () => (
+  <Card className="h-full">
+    <CardContent className="p-4 sm:p-6">
+      <div className="flex flex-col h-full gap-4">
+        <div className="flex gap-4">
+          <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
+          <div className="flex flex-col min-w-0 flex-1">
+            <div className="flex flex-col gap-1">
+              <Skeleton className="h-5 w-32 mb-1" />
+              <div className="flex items-center gap-2 flex-wrap">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <Skeleton className="h-4 w-16 mb-1" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+          <div>
+            <Skeleton className="h-4 w-24 mb-1" />
+            <Skeleton className="h-4 w-16" />
+          </div>
+        </div>
+
+        <div className="mt-auto pt-2">
+          <Skeleton className="h-8 w-full rounded-md" />
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
+const OrganizationCardSkeleton = () => (
+  <Card>
+    <CardContent className="p-6">
+      <div className="space-y-4">
+        <div className="h-6 bg-gray-200 rounded animate-pulse w-1/2" />
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
+const FacilityCardSkeleton = () => (
+  <Card className="overflow-hidden">
+    <div className="h-48 bg-gray-200 animate-pulse" />
+    <CardContent className="p-6">
+      <div className="flex items-center space-x-4">
+        <div className="space-y-2 flex-1">
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
+        </div>
+      </div>
+      <div className="mt-4 space-y-3">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
+            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
+          </div>
+          <div className="space-y-2">
+            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
+            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
+const EncounterCardSkeleton = () => (
+  <Card 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>
+);
+const PatientCardSkeleton = () => (
+  <Card>
+    <CardContent className="p-6">
+      <div className="flex items-center space-x-4">
+        <div className="h-10 w-10 rounded-full bg-gray-200 animate-pulse" />
+        <div className="space-y-2 flex-1">
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
+        </div>
+      </div>
+      <div className="mt-4 space-y-3">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
+            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
+          </div>
+          <div className="space-y-2">
+            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
+            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <div className="h-3 bg-gray-200 rounded animate-pulse w-1/4" />
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/2" />
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
+interface SkeletonLoadingProps {
+  count: number;
+  element:
+    | "UserCard"
+    | "UserList"
+    | "PatientCard"
+    | "FacilityCard"
+    | "OrganizationCard"
+    | "EncounterCard";
+}
+export const SkeletonLoading: React.FC<SkeletonLoadingProps> = ({
+  count,
+  element,
+}) => {
+  const renderSkeleton = () => {
+    switch (element) {
+      case "UserCard":
+        return <UserCardSkeleton />;
+      case "UserList":
+        return <UserListSkeleton />;
+      case "PatientCard":
+        return <PatientCardSkeleton />;
+      case "FacilityCard":
+        return <FacilityCardSkeleton />;
+      case "OrganizationCard":
+        return <OrganizationCardSkeleton />;
+      case "EncounterCard":
+        return <EncounterCardSkeleton />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      {Array.from({ length: count }, (_, index) => (
+        <div key={index} className="skeleton-item">
+          {renderSkeleton()}
+        </div>
+      ))}
+    </>
+  );
+};
diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
index a0162e1a754..53b0dea8683 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -9,10 +9,6 @@ import { Input } from "@/components/ui/input";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
-import {
-  UserCardSkeleton,
-  UserListSkeleton,
-} from "@/components/Facility/FacilityUsersSkeletons";
 import UserListAndCardView from "@/components/Users/UserListAndCard";
 
 import useFilters from "@/hooks/useFilters";
@@ -20,6 +16,8 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 
+import { SkeletonLoading } from "../Common/SkeletonLoading";
+
 export default function FacilityUsers(props: { facilityId: string }) {
   const { t } = useTranslation();
   const { qParams, updateQuery, Pagination } = useFilters({
@@ -46,7 +44,19 @@ export default function FacilityUsers(props: { facilityId: string }) {
 
   if (userListLoading || !userListData) {
     usersList =
-      activeTab === "card" ? <UserCardSkeleton /> : <UserListSkeleton />;
+      activeTab === "card" ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <SkeletonLoading count={6} element="UserCard" />
+        </div>
+      ) : (
+        <div className="overflow-x-auto rounded-lg border border-gray-200">
+          <table className="relative min-w-full divide-y divide-gray-200">
+            <tbody className="divide-y divide-gray-200 bg-white">
+              <SkeletonLoading count={7} element="UserList" />
+            </tbody>
+          </table>
+        </div>
+      );
   } else {
     usersList = (
       <div>
diff --git a/src/components/Facility/FacilityUsersSkeletons.tsx b/src/components/Facility/FacilityUsersSkeletons.tsx
deleted file mode 100644
index 29776241c3f..00000000000
--- a/src/components/Facility/FacilityUsersSkeletons.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-
-export const UserListSkeleton = () => (
-  <div className="overflow-x-auto rounded-lg border border-gray-200">
-    <table className="relative min-w-full divide-y divide-gray-200">
-      {/* Header Skeleton */}
-      <thead>
-        <tr>
-          <th className="sticky top-0 z-10 bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-24" />
-          </th>
-          <th className="bg-gray-100 px-6 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-16" />
-          </th>
-          <th className="bg-gray-100 px-10 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-20" />
-          </th>
-          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-24" />
-          </th>
-          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
-            <Skeleton className="h-4 w-20" />
-          </th>
-        </tr>
-      </thead>
-      {/* Body Skeleton */}
-      <tbody className="divide-y divide-gray-200 bg-white">
-        {Array.from({ length: 7 }).map((_, i) => (
-          <tr key={i} className="hover:bg-gray-50">
-            <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
-              <div className="flex items-center gap-3">
-                <Skeleton className="h-10 w-10 rounded-full" />
-                <div className="flex flex-col">
-                  <Skeleton className="h-4 w-32 mb-1" />
-                  <Skeleton className="h-3 w-20" />
-                </div>
-              </div>
-            </td>
-            <td className="flex-0 px-6 py-4">
-              <Skeleton className="h-4 w-16" />
-            </td>
-            <td className="px-10 py-4 text-sm">
-              <Skeleton className="h-4 w-20" />
-            </td>
-            <td className="px-4 py-4 text-sm whitespace-nowrap">
-              <Skeleton className="h-4 w-24" />
-            </td>
-            <td className="px-4 py-4">
-              <Skeleton className="h-8 w-20 rounded-md" />
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
-);
-
-export const UserCardSkeleton = () => (
-  <div>
-    <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="h-full">
-          <CardContent className="p-4 sm:p-6">
-            <div className="flex flex-col h-full gap-4">
-              <div className="flex gap-4">
-                <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
-                <div className="flex flex-col min-w-0 flex-1">
-                  <div className="flex flex-col gap-1">
-                    <Skeleton className="h-5 w-32 mb-1" />
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <Skeleton className="h-4 w-20" />
-                      <Skeleton className="h-4 w-16" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
-                  <Skeleton className="h-4 w-16 mb-1" />
-                  <Skeleton className="h-4 w-24" />
-                </div>
-                <div>
-                  <Skeleton className="h-4 w-24 mb-1" />
-                  <Skeleton className="h-4 w-16" />
-                </div>
-              </div>
-
-              <div className="mt-auto pt-2">
-                <Skeleton className="h-8 w-full rounded-md" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  </div>
-);
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 99ffee0fb40..26bdcb6d050 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -34,13 +34,13 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 
 import useFilters from "@/hooks/useFilters";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
-import EncounterListSkeleton from "@/pages/Encounters/components/EncounterListSkeleton";
 import { Encounter, EncounterPriority } from "@/types/emr/encounter";
 
 interface EncounterListProps {
@@ -660,7 +660,7 @@ export function EncounterList({
 
         <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           {isLoading ? (
-            <EncounterListSkeleton />
+            <SkeletonLoading count={6} element="EncounterCard" />
           ) : encounters.length === 0 ? (
             <div className="col-span-full">
               <EmptyState />
diff --git a/src/pages/Encounters/components/EncounterListSkeleton.tsx b/src/pages/Encounters/components/EncounterListSkeleton.tsx
deleted file mode 100644
index c7c3f901585..00000000000
--- a/src/pages/Encounters/components/EncounterListSkeleton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function 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>
-      ))}
-    </>
-  );
-}
diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx
index c19afd71f49..5298f52bf26 100644
--- a/src/pages/Organization/OrganizationFacilities.tsx
+++ b/src/pages/Organization/OrganizationFacilities.tsx
@@ -9,6 +9,7 @@ import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 import { Avatar } from "@/components/Common/Avatar";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 
 import useFilters from "@/hooks/useFilters";
 
@@ -82,31 +83,7 @@ export default function OrganizationFacilities({
           data-cy="facility-cards"
         >
           {isLoading ? (
-            Array.from({ length: 6 }).map((_, i) => (
-              <Card key={i} className="overflow-hidden">
-                <div className="h-48 bg-gray-200 animate-pulse" />
-                <CardContent className="p-6">
-                  <div className="flex items-center space-x-4">
-                    <div className="space-y-2 flex-1">
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-                    </div>
-                  </div>
-                  <div className="mt-4 space-y-3">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-                        <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-                      </div>
-                      <div className="space-y-2">
-                        <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-                        <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))
+            <SkeletonLoading count={6} element="FacilityCard" />
           ) : facilities?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 1148ef144f5..9a2f9066c60 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -11,6 +11,7 @@ import { Card, CardContent } from "@/components/ui/card";
 
 import { Avatar } from "@/components/Common/Avatar";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 
 import useFilters from "@/hooks/useFilters";
 
@@ -112,35 +113,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {isLoading ? (
-            Array.from({ length: 6 }).map((_, i) => (
-              <Card key={i}>
-                <CardContent className="p-6">
-                  <div className="flex items-center space-x-4">
-                    <div className="h-10 w-10 rounded-full bg-gray-200 animate-pulse" />
-                    <div className="space-y-2 flex-1">
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-                    </div>
-                  </div>
-                  <div className="mt-4 space-y-3">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-                        <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-                      </div>
-                      <div className="space-y-2">
-                        <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-                        <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-                      </div>
-                    </div>
-                    <div className="space-y-2">
-                      <div className="h-3 bg-gray-200 rounded animate-pulse w-1/4" />
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/2" />
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))
+            <SkeletonLoading count={6} element="PatientCard" />
           ) : patients?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
index 96a03e780d7..369dd14fe79 100644
--- a/src/pages/Organization/OrganizationUsers.tsx
+++ b/src/pages/Organization/OrganizationUsers.tsx
@@ -8,6 +8,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 import { Avatar } from "@/components/Common/Avatar";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 import { UserStatusIndicator } from "@/components/Users/UserListAndCard";
 
 import useFilters from "@/hooks/useFilters";
@@ -92,19 +93,9 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
           />
         </div>
         {isLoadingUsers ? (
-          Array.from({ length: 3 }).map((_, i) => (
-            <Card key={i}>
-              <CardContent className="p-6">
-                <div className="flex items-center space-x-4">
-                  <div className="h-12 w-12 rounded-full bg-gray-200 animate-pulse" />
-                  <div className="space-y-2 flex-1">
-                    <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-                    <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <SkeletonLoading count={6} element="UserCard" />
+          </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
             {users?.results?.length === 0 ? (
diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index 3a0f140f250..bb79158647b 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/src/pages/Organization/OrganizationView.tsx
@@ -11,6 +11,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 import Pagination from "@/components/Common/Pagination";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 
 import query from "@/Utils/request/query";
 import { Organization, getOrgLabel } from "@/types/organization/organization";
@@ -67,19 +68,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
 
         {isLoading ? (
           <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="space-y-4">
-                    <div className="h-6 bg-gray-200 rounded animate-pulse w-1/2" />
-                    <div className="space-y-2">
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
+            <SkeletonLoading count={12} element="OrganizationCard" />
           </div>
         ) : (
           <div className="space-y-6">

From d6149438869ada61ab0e8b5504cda9359923df1a Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 16:46:12 +0530
Subject: [PATCH 12/26] generic skeleton comp

---
 src/components/Common/SkeletonLoading.tsx     | 228 +++++-------------
 src/components/Facility/FacilityUsers.tsx     |  10 +-
 src/pages/Encounters/EncounterList.tsx        |   2 +-
 .../Organization/OrganizationFacilities.tsx   |   2 +-
 .../Organization/OrganizationPatients.tsx     |   2 +-
 src/pages/Organization/OrganizationUsers.tsx  |   2 +-
 src/pages/Organization/OrganizationView.tsx   |   2 +-
 7 files changed, 73 insertions(+), 175 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index 0dfb281a431..da8d0f30b63 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -1,37 +1,62 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
+import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 
-const UserListSkeleton = () => (
-  //   <div className="overflow-x-auto rounded-lg border border-gray-200">
-  //     <table className="relative min-w-full divide-y divide-gray-200">
-
-  <tr className="hover:bg-gray-50">
-    <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
-      <div className="flex items-center gap-3">
-        <Skeleton className="h-10 w-10 rounded-full" />
-        <div className="flex flex-col">
-          <Skeleton className="h-4 w-32 mb-1" />
-          <Skeleton className="h-3 w-20" />
-        </div>
-      </div>
-    </td>
-    <td className="flex-0 px-6 py-4">
-      <Skeleton className="h-4 w-16" />
-    </td>
-    <td className="px-10 py-4 text-sm">
-      <Skeleton className="h-4 w-20" />
-    </td>
-    <td className="px-4 py-4 text-sm whitespace-nowrap">
-      <Skeleton className="h-4 w-24" />
-    </td>
-    <td className="px-4 py-4">
-      <Skeleton className="h-8 w-20 rounded-md" />
-    </td>
-  </tr>
+const TableSkeleton = ({ count }: { count: number }) => (
+  <div className="overflow-x-auto rounded-lg border border-gray-200">
+    <table className="relative min-w-full divide-y divide-gray-200">
+      {/* Header Skeleton */}
+      <thead>
+        <tr>
+          <th className="sticky top-0 z-10 bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-24" />
+          </th>
+          <th className="bg-gray-100 px-6 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-16" />
+          </th>
+          <th className="bg-gray-100 px-10 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-20" />
+          </th>
+          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-24" />
+          </th>
+          <th className="bg-gray-100 px-4 py-3 text-left text-sm font-medium text-gray-600">
+            <Skeleton className="h-4 w-20" />
+          </th>
+        </tr>
+      </thead>
+      {/* Body Skeleton */}
+      <tbody className="divide-y divide-gray-200 bg-white">
+        {Array.from({ length: count }).map((_, i) => (
+          <tr key={i} className="hover:bg-gray-50">
+            <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
+              <div className="flex items-center gap-3">
+                <Skeleton className="h-10 w-10 rounded-full" />
+                <div className="flex flex-col">
+                  <Skeleton className="h-4 w-32 mb-1" />
+                  <Skeleton className="h-3 w-20" />
+                </div>
+              </div>
+            </td>
+            <td className="flex-0 px-6 py-4">
+              <Skeleton className="h-4 w-16" />
+            </td>
+            <td className="px-10 py-4 text-sm">
+              <Skeleton className="h-4 w-20" />
+            </td>
+            <td className="px-4 py-4 text-sm whitespace-nowrap">
+              <Skeleton className="h-4 w-24" />
+            </td>
+            <td className="px-4 py-4">
+              <Skeleton className="h-8 w-20 rounded-md" />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
 );
 
-const UserCardSkeleton = () => (
+const CardGridSkeleton = () => (
   <Card className="h-full">
     <CardContent className="p-4 sm:p-6">
       <div className="flex flex-col h-full gap-4">
@@ -66,143 +91,22 @@ const UserCardSkeleton = () => (
     </CardContent>
   </Card>
 );
-
-const OrganizationCardSkeleton = () => (
-  <Card>
-    <CardContent className="p-6">
-      <div className="space-y-4">
-        <div className="h-6 bg-gray-200 rounded animate-pulse w-1/2" />
-        <div className="space-y-2">
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-        </div>
-      </div>
-    </CardContent>
-  </Card>
-);
-
-const FacilityCardSkeleton = () => (
-  <Card className="overflow-hidden">
-    <div className="h-48 bg-gray-200 animate-pulse" />
-    <CardContent className="p-6">
-      <div className="flex items-center space-x-4">
-        <div className="space-y-2 flex-1">
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-        </div>
-      </div>
-      <div className="mt-4 space-y-3">
-        <div className="grid grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-          </div>
-          <div className="space-y-2">
-            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-          </div>
-        </div>
-      </div>
-    </CardContent>
-  </Card>
-);
-
-const EncounterCardSkeleton = () => (
-  <Card 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>
-);
-const PatientCardSkeleton = () => (
-  <Card>
-    <CardContent className="p-6">
-      <div className="flex items-center space-x-4">
-        <div className="h-10 w-10 rounded-full bg-gray-200 animate-pulse" />
-        <div className="space-y-2 flex-1">
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-        </div>
-      </div>
-      <div className="mt-4 space-y-3">
-        <div className="grid grid-cols-2 gap-4">
-          <div className="space-y-2">
-            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-          </div>
-          <div className="space-y-2">
-            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/3" />
-            <div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
-          </div>
-        </div>
-        <div className="space-y-2">
-          <div className="h-3 bg-gray-200 rounded animate-pulse w-1/4" />
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-1/2" />
-        </div>
-      </div>
-    </CardContent>
-  </Card>
-);
 interface SkeletonLoadingProps {
   count: number;
-  element:
-    | "UserCard"
-    | "UserList"
-    | "PatientCard"
-    | "FacilityCard"
-    | "OrganizationCard"
-    | "EncounterCard";
+  element: "TableSkeleton" | "CardGridSkeleton";
 }
-export const SkeletonLoading: React.FC<SkeletonLoadingProps> = ({
-  count,
-  element,
-}) => {
-  const renderSkeleton = () => {
-    switch (element) {
-      case "UserCard":
-        return <UserCardSkeleton />;
-      case "UserList":
-        return <UserListSkeleton />;
-      case "PatientCard":
-        return <PatientCardSkeleton />;
-      case "FacilityCard":
-        return <FacilityCardSkeleton />;
-      case "OrganizationCard":
-        return <OrganizationCardSkeleton />;
-      case "EncounterCard":
-        return <EncounterCardSkeleton />;
-      default:
-        return null;
-    }
-  };
-
+export const SkeletonLoading = ({ count, element }: SkeletonLoadingProps) => {
   return (
     <>
-      {Array.from({ length: count }, (_, index) => (
-        <div key={index} className="skeleton-item">
-          {renderSkeleton()}
-        </div>
-      ))}
+      {element === "CardGridSkeleton" ? (
+        Array.from({ length: count }, (_, index) => (
+          <div key={index} className="skeleton-item">
+            <CardGridSkeleton />
+          </div>
+        ))
+      ) : (
+        <TableSkeleton count={count} />
+      )}
     </>
   );
 };
diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
index 53b0dea8683..9bb8a71971e 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -46,16 +46,10 @@ export default function FacilityUsers(props: { facilityId: string }) {
     usersList =
       activeTab === "card" ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <SkeletonLoading count={6} element="UserCard" />
+          <SkeletonLoading count={6} element="CardGridSkeleton" />
         </div>
       ) : (
-        <div className="overflow-x-auto rounded-lg border border-gray-200">
-          <table className="relative min-w-full divide-y divide-gray-200">
-            <tbody className="divide-y divide-gray-200 bg-white">
-              <SkeletonLoading count={7} element="UserList" />
-            </tbody>
-          </table>
-        </div>
+        <SkeletonLoading element="TableSkeleton" count={7} />
       );
   } else {
     usersList = (
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 26bdcb6d050..b0f3041b2a7 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -660,7 +660,7 @@ export function EncounterList({
 
         <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           {isLoading ? (
-            <SkeletonLoading count={6} element="EncounterCard" />
+            <SkeletonLoading count={6} element="CardGridSkeleton" />
           ) : encounters.length === 0 ? (
             <div className="col-span-full">
               <EmptyState />
diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx
index 5298f52bf26..d61a36f466a 100644
--- a/src/pages/Organization/OrganizationFacilities.tsx
+++ b/src/pages/Organization/OrganizationFacilities.tsx
@@ -83,7 +83,7 @@ export default function OrganizationFacilities({
           data-cy="facility-cards"
         >
           {isLoading ? (
-            <SkeletonLoading count={6} element="FacilityCard" />
+            <SkeletonLoading count={6} element="CardGridSkeleton" />
           ) : facilities?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 9a2f9066c60..beb2c522e06 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -113,7 +113,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {isLoading ? (
-            <SkeletonLoading count={6} element="PatientCard" />
+            <SkeletonLoading count={6} element="CardGridSkeleton" />
           ) : patients?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
index 369dd14fe79..ad39d1a3064 100644
--- a/src/pages/Organization/OrganizationUsers.tsx
+++ b/src/pages/Organization/OrganizationUsers.tsx
@@ -94,7 +94,7 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
         </div>
         {isLoadingUsers ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <SkeletonLoading count={6} element="UserCard" />
+            <SkeletonLoading count={6} element="CardGridSkeleton" />
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index 533af8b5b2f..85e78e07c65 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/src/pages/Organization/OrganizationView.tsx
@@ -68,7 +68,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
 
         {isLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <SkeletonLoading count={12} element="OrganizationCard" />
+            <SkeletonLoading count={6} element="CardGridSkeleton" />
           </div>
         ) : (
           <div className="space-y-6">

From 7fceae6c4dd1c2fe10416d72cf01924173163639 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 16:59:20 +0530
Subject: [PATCH 13/26] noteskeleton

---
 src/components/Common/SkeletonLoading.tsx     | 20 ++++++++++++++++++-
 .../components/EncounterNoteSkeleton.tsx      | 19 ------------------
 .../Encounters/tabs/EncounterNotesTab.tsx     | 10 +++++++---
 3 files changed, 26 insertions(+), 23 deletions(-)
 delete mode 100644 src/pages/Encounters/components/EncounterNoteSkeleton.tsx

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index da8d0f30b63..df649d0bc0e 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -56,6 +56,17 @@ const TableSkeleton = ({ count }: { count: number }) => (
   </div>
 );
 
+const NoteSkeleton = () => (
+  <div 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>
+);
 const CardGridSkeleton = () => (
   <Card className="h-full">
     <CardContent className="p-4 sm:p-6">
@@ -93,8 +104,9 @@ const CardGridSkeleton = () => (
 );
 interface SkeletonLoadingProps {
   count: number;
-  element: "TableSkeleton" | "CardGridSkeleton";
+  element: "CardGridSkeleton" | "TableSkeleton" | "NoteSkeleton";
 }
+
 export const SkeletonLoading = ({ count, element }: SkeletonLoadingProps) => {
   return (
     <>
@@ -104,6 +116,12 @@ export const SkeletonLoading = ({ count, element }: SkeletonLoadingProps) => {
             <CardGridSkeleton />
           </div>
         ))
+      ) : element === "NoteSkeleton" ? (
+        Array.from({ length: count }, (_, index) => (
+          <div key={index} className="skeleton-item">
+            <NoteSkeleton />
+          </div>
+        ))
       ) : (
         <TableSkeleton count={count} />
       )}
diff --git a/src/pages/Encounters/components/EncounterNoteSkeleton.tsx b/src/pages/Encounters/components/EncounterNoteSkeleton.tsx
deleted file mode 100644
index d429220d731..00000000000
--- a/src/pages/Encounters/components/EncounterNoteSkeleton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function EncounterNoteSkeleton() {
-  return (
-    <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>
-  );
-}
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index e061bd41a82..246cfa5f394 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -44,6 +44,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -52,7 +53,6 @@ import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
 import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
-import EncounterNoteSkeleton from "@/pages/Encounters/components/EncounterNoteSkeleton";
 import { Message } from "@/types/notes/messages";
 import { Thread } from "@/types/notes/threads";
 
@@ -551,7 +551,9 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
             <>
               {messagesLoading ? (
                 <div className="flex-1 p-4">
-                  <EncounterNoteSkeleton />
+                  <div className="space-y-4">
+                    <SkeletonLoading element="NoteSkeleton" count={3} />
+                  </div>
                 </div>
               ) : (
                 <>
@@ -576,7 +578,9 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
                       )}
                       {isFetchingNextPage && (
                         <div className="py-2">
-                          <EncounterNoteSkeleton />
+                          <div className="space-y-4">
+                            <SkeletonLoading element="NoteSkeleton" count={3} />
+                          </div>
                         </div>
                       )}
                       <div ref={ref} />

From 72058b05098b20adec3831c09d5c4083484efbdd Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 17:10:59 +0530
Subject: [PATCH 14/26] lint fixed

---
 src/components/Facility/FacilityUsers.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
index 9bb8a71971e..c5d24deda56 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -9,6 +9,7 @@ import { Input } from "@/components/ui/input";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 import UserListAndCardView from "@/components/Users/UserListAndCard";
 
 import useFilters from "@/hooks/useFilters";
@@ -16,8 +17,6 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 
-import { SkeletonLoading } from "../Common/SkeletonLoading";
-
 export default function FacilityUsers(props: { facilityId: string }) {
   const { t } = useTranslation();
   const { qParams, updateQuery, Pagination } = useFilters({

From 04ff7186aca607bcc5142355888d6e6404b28292 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 17:49:32 +0530
Subject: [PATCH 15/26] rm OrgIndexSkeleton

---
 .../FacilityOrganizationSkeleton.tsx          |  4 +--
 src/pages/Organization/OrganizationIndex.tsx  | 16 ++++++---
 .../components/OrganizationIndexSkeleton.tsx  | 36 -------------------
 3 files changed, 14 insertions(+), 42 deletions(-)
 delete mode 100644 src/pages/Organization/components/OrganizationIndexSkeleton.tsx

diff --git a/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx b/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
index 5ab9e761303..34ce137cc0a 100644
--- a/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
+++ b/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
@@ -5,9 +5,9 @@ export default function 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" />
+      <Skeleton className="h-8 w-8/12 self-end" />
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {Array.from({ length: 6 }).map((_, i) => (
+        {Array.from({ length: 9 }).map((_, i) => (
           <Card key={i} className="relative space-y-4">
             <CardHeader>
               <Skeleton className="h-6 w-1/3" />
diff --git a/src/pages/Organization/OrganizationIndex.tsx b/src/pages/Organization/OrganizationIndex.tsx
index fb7dddd4a59..433336d80c2 100644
--- a/src/pages/Organization/OrganizationIndex.tsx
+++ b/src/pages/Organization/OrganizationIndex.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
+import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -14,9 +15,9 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 
 import query from "@/Utils/request/query";
-import OrganizationIndexSkeleton from "@/pages/Organization/components/OrganizationIndexSkeleton";
 import {
   type Organization,
   getOrgLabel,
@@ -29,13 +30,20 @@ export default function OrganizationIndex() {
     queryFn: query(organizationApi.listMine),
   });
 
+  const { t } = useTranslation();
   if (isLoading) {
-    return <OrganizationIndexSkeleton />;
+    return (
+      <Page title={t("organizations")}>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-2">
+          <SkeletonLoading count={6} element="CardGridSkeleton" />
+        </div>
+      </Page>
+    );
   }
 
   if (!data?.results?.length) {
     return (
-      <Page title="Organizations">
+      <Page title={t("organizations")}>
         <Card className="border-dashed">
           <CardHeader>
             <CardTitle className="text-xl font-semibold text-center">
@@ -60,7 +68,7 @@ export default function OrganizationIndex() {
   }
 
   return (
-    <Page title="Organizations">
+    <Page title={t("organizations")}>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pb-4 mt-4">
         {data.results.map((org: Organization) => (
           <Card key={org.id} className="relative group">
diff --git a/src/pages/Organization/components/OrganizationIndexSkeleton.tsx b/src/pages/Organization/components/OrganizationIndexSkeleton.tsx
deleted file mode 100644
index 1b2eb8d3028..00000000000
--- a/src/pages/Organization/components/OrganizationIndexSkeleton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-
-import Page from "@/components/Common/Page";
-
-export default function 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>
-  );
-}

From 37291d6348f4991275b88b72b83e8d96d6d01d54 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 17:56:20 +0530
Subject: [PATCH 16/26] rm facilityOrgSkeleton

---
 .../FacilityOrganizationIndex.tsx             | 13 ++++++++--
 .../FacilityOrganizationSkeleton.tsx          | 24 -------------------
 2 files changed, 11 insertions(+), 26 deletions(-)
 delete mode 100644 src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx

diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index 99587298fd8..8ae0cd0b0c0 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -13,12 +13,13 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
-import FacilityOrganizationSkeleton from "@/pages/FacilityOrganization/components/FacilityOrganizationSkeleton";
 import { FacilityOrganization } from "@/types/facilityOrganization/facilityOrganization";
 
 import CreateFacilityOrganizationSheet from "./components/CreateFacilityOrganizationSheet";
@@ -38,7 +39,15 @@ export default function FacilityOrganizationIndex({
   });
 
   if (isLoading) {
-    return <FacilityOrganizationSkeleton />;
+    return (
+      <div className="px-6 py-6 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-8 w-8/12 self-end" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <SkeletonLoading count={6} element="CardGridSkeleton" />
+        </div>
+      </div>
+    );
   }
 
   if (!data?.results?.length) {
diff --git a/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx b/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
deleted file mode 100644
index 34ce137cc0a..00000000000
--- a/src/pages/FacilityOrganization/components/FacilityOrganizationSkeleton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Card, CardFooter, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function FacilityOrganizationSkeleton() {
-  return (
-    <div className="px-6 py-6 space-y-6">
-      <Skeleton className="h-8 w-48" />
-      <Skeleton className="h-8 w-8/12 self-end" />
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {Array.from({ length: 9 }).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>
-  );
-}

From b2366e4a08ed0233ad029736b52ed2c13286d57e Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 18:03:22 +0530
Subject: [PATCH 17/26] optimize orgSkeleton

---
 .../components/OrganizationLayoutSkeleton.tsx | 26 +++----------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
index 2af8bc9ff9c..0aa474dcd39 100644
--- a/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
+++ b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
@@ -1,37 +1,19 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 
+import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+
 export default function 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" />
-        ))}
+        <SkeletonLoading count={3} element="NoteSkeleton" />
       </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>
-        ))}
+        <SkeletonLoading count={6} element="CardGridSkeleton" />
       </div>
     </div>
   );

From 3fbf4212d696b339466e598f36e8ea957b79a130 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Mon, 20 Jan 2025 19:34:39 +0530
Subject: [PATCH 18/26] rm skeletonLoading comp

---
 src/components/Common/SkeletonLoading.tsx     | 113 ++++++++----------
 src/components/Facility/FacilityUsers.tsx     |   9 +-
 src/pages/Encounters/EncounterList.tsx        |   4 +-
 .../Encounters/tabs/EncounterNotesTab.tsx     |   6 +-
 .../FacilityOrganizationIndex.tsx             |   4 +-
 .../Organization/OrganizationFacilities.tsx   |   4 +-
 src/pages/Organization/OrganizationIndex.tsx  |   4 +-
 .../Organization/OrganizationPatients.tsx     |   4 +-
 src/pages/Organization/OrganizationUsers.tsx  |   4 +-
 src/pages/Organization/OrganizationView.tsx   |   4 +-
 .../components/OrganizationLayoutSkeleton.tsx |   9 +-
 11 files changed, 76 insertions(+), 89 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index df649d0bc0e..f06947ff596 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 
-const TableSkeleton = ({ count }: { count: number }) => (
+export const TableSkeleton = ({ count }: { count: number }) => (
   <div className="overflow-x-auto rounded-lg border border-gray-200">
     <table className="relative min-w-full divide-y divide-gray-200">
       {/* Header Skeleton */}
@@ -56,75 +56,56 @@ const TableSkeleton = ({ count }: { count: number }) => (
   </div>
 );
 
-const NoteSkeleton = () => (
-  <div 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" />
+export const NoteSkeleton = ({ count }: { count: number }) =>
+  Array.from({ length: count }, (_, index) => (
+    <div key={index}>
+      <div 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>
-  </div>
-);
-const CardGridSkeleton = () => (
-  <Card className="h-full">
-    <CardContent className="p-4 sm:p-6">
-      <div className="flex flex-col h-full gap-4">
-        <div className="flex gap-4">
-          <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
-          <div className="flex flex-col min-w-0 flex-1">
-            <div className="flex flex-col gap-1">
-              <Skeleton className="h-5 w-32 mb-1" />
-              <div className="flex items-center gap-2 flex-wrap">
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-4 w-16" />
+  ));
+
+export const CardGridSkeleton = ({ count }: { count: number }) =>
+  Array.from({ length: count }, (_, index) => (
+    <div key={index} className="skeleton-item">
+      <Card className="h-full">
+        <CardContent className="p-4 sm:p-6">
+          <div className="flex flex-col h-full gap-4">
+            <div className="flex gap-4">
+              <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
+              <div className="flex flex-col min-w-0 flex-1">
+                <div className="flex flex-col gap-1">
+                  <Skeleton className="h-5 w-32 mb-1" />
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="h-4 w-16" />
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 gap-4 text-sm">
-          <div>
-            <Skeleton className="h-4 w-16 mb-1" />
-            <Skeleton className="h-4 w-24" />
-          </div>
-          <div>
-            <Skeleton className="h-4 w-24 mb-1" />
-            <Skeleton className="h-4 w-16" />
-          </div>
-        </div>
 
-        <div className="mt-auto pt-2">
-          <Skeleton className="h-8 w-full rounded-md" />
-        </div>
-      </div>
-    </CardContent>
-  </Card>
-);
-interface SkeletonLoadingProps {
-  count: number;
-  element: "CardGridSkeleton" | "TableSkeleton" | "NoteSkeleton";
-}
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <Skeleton className="h-4 w-16 mb-1" />
+                <Skeleton className="h-4 w-24" />
+              </div>
+              <div>
+                <Skeleton className="h-4 w-24 mb-1" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+            </div>
 
-export const SkeletonLoading = ({ count, element }: SkeletonLoadingProps) => {
-  return (
-    <>
-      {element === "CardGridSkeleton" ? (
-        Array.from({ length: count }, (_, index) => (
-          <div key={index} className="skeleton-item">
-            <CardGridSkeleton />
-          </div>
-        ))
-      ) : element === "NoteSkeleton" ? (
-        Array.from({ length: count }, (_, index) => (
-          <div key={index} className="skeleton-item">
-            <NoteSkeleton />
+            <div className="mt-auto pt-2">
+              <Skeleton className="h-8 w-full rounded-md" />
+            </div>
           </div>
-        ))
-      ) : (
-        <TableSkeleton count={count} />
-      )}
-    </>
-  );
-};
+        </CardContent>
+      </Card>
+    </div>
+  ));
diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
index c5d24deda56..f2fe0e61e12 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -9,7 +9,10 @@ import { Input } from "@/components/ui/input";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import {
+  CardGridSkeleton,
+  TableSkeleton,
+} from "@/components/Common/SkeletonLoading";
 import UserListAndCardView from "@/components/Users/UserListAndCard";
 
 import useFilters from "@/hooks/useFilters";
@@ -45,10 +48,10 @@ export default function FacilityUsers(props: { facilityId: string }) {
     usersList =
       activeTab === "card" ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <SkeletonLoading count={6} element="CardGridSkeleton" />
+          <CardGridSkeleton count={6} />
         </div>
       ) : (
-        <SkeletonLoading element="TableSkeleton" count={7} />
+        <TableSkeleton count={7} />
       );
   } else {
     usersList = (
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index b0f3041b2a7..59dbbadfed8 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -34,7 +34,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import useFilters from "@/hooks/useFilters";
 
@@ -660,7 +660,7 @@ export function EncounterList({
 
         <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
           {isLoading ? (
-            <SkeletonLoading count={6} element="CardGridSkeleton" />
+            <CardGridSkeleton count={6} />
           ) : encounters.length === 0 ? (
             <div className="col-span-full">
               <EmptyState />
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index 246cfa5f394..f19704644d2 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -44,7 +44,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { NoteSkeleton } from "@/components/Common/SkeletonLoading";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -552,7 +552,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
               {messagesLoading ? (
                 <div className="flex-1 p-4">
                   <div className="space-y-4">
-                    <SkeletonLoading element="NoteSkeleton" count={3} />
+                    <NoteSkeleton count={3} />
                   </div>
                 </div>
               ) : (
@@ -579,7 +579,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
                       {isFetchingNextPage && (
                         <div className="py-2">
                           <div className="space-y-4">
-                            <SkeletonLoading element="NoteSkeleton" count={3} />
+                            <NoteSkeleton count={3} />
                           </div>
                         </div>
                       )}
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index 8ae0cd0b0c0..9f81df9b8f0 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -16,7 +16,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -44,7 +44,7 @@ export default function FacilityOrganizationIndex({
         <Skeleton className="h-8 w-48" />
         <Skeleton className="h-8 w-8/12 self-end" />
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <SkeletonLoading count={6} element="CardGridSkeleton" />
+          <CardGridSkeleton count={6} />
         </div>
       </div>
     );
diff --git a/src/pages/Organization/OrganizationFacilities.tsx b/src/pages/Organization/OrganizationFacilities.tsx
index d61a36f466a..5a4b8c268c7 100644
--- a/src/pages/Organization/OrganizationFacilities.tsx
+++ b/src/pages/Organization/OrganizationFacilities.tsx
@@ -9,7 +9,7 @@ import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 import { Avatar } from "@/components/Common/Avatar";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import useFilters from "@/hooks/useFilters";
 
@@ -83,7 +83,7 @@ export default function OrganizationFacilities({
           data-cy="facility-cards"
         >
           {isLoading ? (
-            <SkeletonLoading count={6} element="CardGridSkeleton" />
+            <CardGridSkeleton count={6} />
           ) : facilities?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
diff --git a/src/pages/Organization/OrganizationIndex.tsx b/src/pages/Organization/OrganizationIndex.tsx
index 433336d80c2..3cfbb299460 100644
--- a/src/pages/Organization/OrganizationIndex.tsx
+++ b/src/pages/Organization/OrganizationIndex.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/card";
 
 import Page from "@/components/Common/Page";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import query from "@/Utils/request/query";
 import {
@@ -35,7 +35,7 @@ export default function OrganizationIndex() {
     return (
       <Page title={t("organizations")}>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-2">
-          <SkeletonLoading count={6} element="CardGridSkeleton" />
+          <CardGridSkeleton count={6} />
         </div>
       </Page>
     );
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index beb2c522e06..98cca56915a 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -11,7 +11,7 @@ import { Card, CardContent } from "@/components/ui/card";
 
 import { Avatar } from "@/components/Common/Avatar";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import useFilters from "@/hooks/useFilters";
 
@@ -113,7 +113,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {isLoading ? (
-            <SkeletonLoading count={6} element="CardGridSkeleton" />
+            <CardGridSkeleton count={6} />
           ) : patients?.results?.length === 0 ? (
             <Card className="col-span-full">
               <CardContent className="p-6 text-center text-gray-500">
diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
index ad39d1a3064..db9f846d8d5 100644
--- a/src/pages/Organization/OrganizationUsers.tsx
+++ b/src/pages/Organization/OrganizationUsers.tsx
@@ -8,7 +8,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 import { Avatar } from "@/components/Common/Avatar";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 import { UserStatusIndicator } from "@/components/Users/UserListAndCard";
 
 import useFilters from "@/hooks/useFilters";
@@ -94,7 +94,7 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
         </div>
         {isLoadingUsers ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <SkeletonLoading count={6} element="CardGridSkeleton" />
+            <CardGridSkeleton count={6} />
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index 85e78e07c65..faea49a5993 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/src/pages/Organization/OrganizationView.tsx
@@ -11,7 +11,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 import Pagination from "@/components/Common/Pagination";
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import query from "@/Utils/request/query";
 import { Organization, getOrgLabel } from "@/types/organization/organization";
@@ -68,7 +68,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
 
         {isLoading ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <SkeletonLoading count={6} element="CardGridSkeleton" />
+            <CardGridSkeleton count={6} />
           </div>
         ) : (
           <div className="space-y-6">
diff --git a/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
index 0aa474dcd39..a472c5f520e 100644
--- a/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
+++ b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
@@ -1,6 +1,9 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
-import { SkeletonLoading } from "@/components/Common/SkeletonLoading";
+import {
+  CardGridSkeleton,
+  NoteSkeleton,
+} from "@/components/Common/SkeletonLoading";
 
 export default function OrganizationLayoutSkeleton() {
   return (
@@ -8,12 +11,12 @@ export default function OrganizationLayoutSkeleton() {
       <Skeleton className="h-8 w-48 mb-4" />
       <Skeleton className="h-4 w-24 mb-4" />
       <div className="flex space-x-4 mb-4">
-        <SkeletonLoading count={3} element="NoteSkeleton" />
+        <NoteSkeleton count={3} />
       </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">
-        <SkeletonLoading count={6} element="CardGridSkeleton" />
+        <CardGridSkeleton count={6} />
       </div>
     </div>
   );

From 9d152c27b1c87ed815756693946c6487d16264ad Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Tue, 21 Jan 2025 10:46:01 +0530
Subject: [PATCH 19/26] add animate-pulse

---
 src/components/Common/SkeletonLoading.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index f06947ff596..2bf8878872d 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -25,7 +25,7 @@ export const TableSkeleton = ({ count }: { count: number }) => (
         </tr>
       </thead>
       {/* Body Skeleton */}
-      <tbody className="divide-y divide-gray-200 bg-white">
+      <tbody className="divide-y divide-gray-200 bg-white animate-pulse">
         {Array.from({ length: count }).map((_, i) => (
           <tr key={i} className="hover:bg-gray-50">
             <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
@@ -73,7 +73,7 @@ export const NoteSkeleton = ({ count }: { count: number }) =>
 
 export const CardGridSkeleton = ({ count }: { count: number }) =>
   Array.from({ length: count }, (_, index) => (
-    <div key={index} className="skeleton-item">
+    <div key={index} className="skeleton-item animate-pulse">
       <Card className="h-full">
         <CardContent className="p-4 sm:p-6">
           <div className="flex flex-col h-full gap-4">

From af6f8b5cf99f6713d2bf4a27e487f7540ce28ca2 Mon Sep 17 00:00:00 2001
From: Aditya Jindal <adityajindal2305@gmail.com>
Date: Tue, 21 Jan 2025 11:09:53 +0530
Subject: [PATCH 20/26] Update src/components/Common/SkeletonLoading.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/Common/SkeletonLoading.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index 2bf8878872d..d6f49f9764f 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -57,8 +57,13 @@ export const TableSkeleton = ({ count }: { count: number }) => (
 );
 
 export const NoteSkeleton = ({ count }: { count: number }) =>
-  Array.from({ length: count }, (_, index) => (
-    <div key={index}>
+  <div className="space-y-4">
+    {Array.from({ length: count }, (_, index) => (
+    <div 
+      key={index}
+      role="status"
+      aria-label={`Loading note ${index + 1} of ${count}`}
+    >
       <div 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" />
@@ -69,7 +74,8 @@ export const NoteSkeleton = ({ count }: { count: number }) =>
         </div>
       </div>
     </div>
-  ));
+    ))}
+  </div>
 
 export const CardGridSkeleton = ({ count }: { count: number }) =>
   Array.from({ length: count }, (_, index) => (

From a556f7132d5eab611990f135b46ad38c29b45ce9 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Tue, 21 Jan 2025 11:12:33 +0530
Subject: [PATCH 21/26] lint fixed

---
 src/components/Common/SkeletonLoading.tsx | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index d6f49f9764f..5fce7ba42f9 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -56,26 +56,23 @@ export const TableSkeleton = ({ count }: { count: number }) => (
   </div>
 );
 
-export const NoteSkeleton = ({ count }: { count: number }) =>
+export const NoteSkeleton = ({ count }: { count: number }) => (
   <div className="space-y-4">
     {Array.from({ length: count }, (_, index) => (
-    <div 
-      key={index}
-      role="status"
-      aria-label={`Loading note ${index + 1} of ${count}`}
-    >
-      <div 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 key={index}>
+        <div 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>
-    </div>
     ))}
   </div>
+);
 
 export const CardGridSkeleton = ({ count }: { count: number }) =>
   Array.from({ length: count }, (_, index) => (

From 446e59ca24411bd222e7f12e9336056cac64170b Mon Sep 17 00:00:00 2001
From: Aditya Jindal <adityajindal2305@gmail.com>
Date: Tue, 21 Jan 2025 11:20:46 +0530
Subject: [PATCH 22/26] Update src/components/Common/SkeletonLoading.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/Common/SkeletonLoading.tsx | 69 +++++++++++++----------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index 5fce7ba42f9..1561ca6eb43 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -75,40 +75,49 @@ export const NoteSkeleton = ({ count }: { count: number }) => (
 );
 
 export const CardGridSkeleton = ({ count }: { count: number }) =>
-  Array.from({ length: count }, (_, index) => (
-    <div key={index} className="skeleton-item animate-pulse">
-      <Card className="h-full">
-        <CardContent className="p-4 sm:p-6">
-          <div className="flex flex-col h-full gap-4">
-            <div className="flex gap-4">
-              <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
-              <div className="flex flex-col min-w-0 flex-1">
-                <div className="flex flex-col gap-1">
-                  <Skeleton className="h-5 w-32 mb-1" />
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <Skeleton className="h-4 w-20" />
-                    <Skeleton className="h-4 w-16" />
+  <div 
+    className="grid gap-4"
+    role="status"
+    aria-label="Loading cards"
+  >
+    {Array.from({ length: count }, (_, index) => (
+      <div key={index} className="skeleton-item animate-pulse">
+        <Card 
+          className="h-full"
+          aria-label={`Loading card ${index + 1} of ${count}`}
+        >
+          <CardContent className="p-4 sm:p-6">
+            <div className="flex flex-col h-full gap-4">
+              <div className="flex gap-4">
+                <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
+                <div className="flex flex-col min-w-0 flex-1">
+                  <div className="flex flex-col gap-1">
+                    <Skeleton className="h-5 w-32 mb-1" />
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Skeleton className="h-4 w-20" />
+                      <Skeleton className="h-4 w-16" />
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
-            <div className="grid grid-cols-2 gap-4 text-sm">
-              <div>
-                <Skeleton className="h-4 w-16 mb-1" />
-                <Skeleton className="h-4 w-24" />
-              </div>
-              <div>
-                <Skeleton className="h-4 w-24 mb-1" />
-                <Skeleton className="h-4 w-16" />
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <Skeleton className="h-4 w-16 mb-1" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+                <div>
+                  <Skeleton className="h-4 w-24 mb-1" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
               </div>
-            </div>
 
-            <div className="mt-auto pt-2">
-              <Skeleton className="h-8 w-full rounded-md" />
+              <div className="mt-auto pt-2">
+                <Skeleton className="h-8 w-full rounded-md" />
+              </div>
             </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  ));
+          </CardContent>
+        </Card>
+      </div>
+    ))}
+  </div>

From 3589e124affe8eec62c6b4d00c96d47fb5820419 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Tue, 21 Jan 2025 11:21:23 +0530
Subject: [PATCH 23/26] lint fixed

---
 src/components/Common/SkeletonLoading.tsx | 69 ++++++++++-------------
 1 file changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index 1561ca6eb43..5fce7ba42f9 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -75,49 +75,40 @@ export const NoteSkeleton = ({ count }: { count: number }) => (
 );
 
 export const CardGridSkeleton = ({ count }: { count: number }) =>
-  <div 
-    className="grid gap-4"
-    role="status"
-    aria-label="Loading cards"
-  >
-    {Array.from({ length: count }, (_, index) => (
-      <div key={index} className="skeleton-item animate-pulse">
-        <Card 
-          className="h-full"
-          aria-label={`Loading card ${index + 1} of ${count}`}
-        >
-          <CardContent className="p-4 sm:p-6">
-            <div className="flex flex-col h-full gap-4">
-              <div className="flex gap-4">
-                <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
-                <div className="flex flex-col min-w-0 flex-1">
-                  <div className="flex flex-col gap-1">
-                    <Skeleton className="h-5 w-32 mb-1" />
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <Skeleton className="h-4 w-20" />
-                      <Skeleton className="h-4 w-16" />
-                    </div>
+  Array.from({ length: count }, (_, index) => (
+    <div key={index} className="skeleton-item animate-pulse">
+      <Card className="h-full">
+        <CardContent className="p-4 sm:p-6">
+          <div className="flex flex-col h-full gap-4">
+            <div className="flex gap-4">
+              <Skeleton className="h-12 w-12 sm:h-16 sm:w-16 rounded-full flex-shrink-0" />
+              <div className="flex flex-col min-w-0 flex-1">
+                <div className="flex flex-col gap-1">
+                  <Skeleton className="h-5 w-32 mb-1" />
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="h-4 w-16" />
                   </div>
                 </div>
               </div>
+            </div>
 
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
-                  <Skeleton className="h-4 w-16 mb-1" />
-                  <Skeleton className="h-4 w-24" />
-                </div>
-                <div>
-                  <Skeleton className="h-4 w-24 mb-1" />
-                  <Skeleton className="h-4 w-16" />
-                </div>
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <Skeleton className="h-4 w-16 mb-1" />
+                <Skeleton className="h-4 w-24" />
               </div>
-
-              <div className="mt-auto pt-2">
-                <Skeleton className="h-8 w-full rounded-md" />
+              <div>
+                <Skeleton className="h-4 w-24 mb-1" />
+                <Skeleton className="h-4 w-16" />
               </div>
             </div>
-          </CardContent>
-        </Card>
-      </div>
-    ))}
-  </div>
+
+            <div className="mt-auto pt-2">
+              <Skeleton className="h-8 w-full rounded-md" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  ));

From 09ea4738d847c216bc90917056533857b0c7d5de Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Tue, 21 Jan 2025 11:22:03 +0530
Subject: [PATCH 24/26] reset code

---
 src/components/Common/SkeletonLoading.tsx | 25 ++++++++++-------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index 5fce7ba42f9..2bf8878872d 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -56,23 +56,20 @@ export const TableSkeleton = ({ count }: { count: number }) => (
   </div>
 );
 
-export const NoteSkeleton = ({ count }: { count: number }) => (
-  <div className="space-y-4">
-    {Array.from({ length: count }, (_, index) => (
-      <div key={index}>
-        <div 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>
+export const NoteSkeleton = ({ count }: { count: number }) =>
+  Array.from({ length: count }, (_, index) => (
+    <div key={index}>
+      <div 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>
-);
+    </div>
+  ));
 
 export const CardGridSkeleton = ({ count }: { count: number }) =>
   Array.from({ length: count }, (_, index) => (

From acc74e8cfbe3a6059a4eff7c7e5805ea7387517d Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Tue, 21 Jan 2025 21:49:06 +0530
Subject: [PATCH 25/26] Empty-Commit


From 52baad5da9253332cd6bc07567a285b2a7cab277 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 22 Jan 2025 13:36:47 +0530
Subject: [PATCH 26/26] completed all files remaining

---
 src/components/Common/SkeletonLoading.tsx     |  2 +-
 .../QuestionnaireResponsesList.tsx            | 20 ++++------------
 .../PatientDetailsTab/patientUpdates.tsx      | 18 +++------------
 .../Encounters/tabs/EncounterNotesTab.tsx     |  6 ++---
 .../FacilityOrganizationUsers.tsx             | 23 ++++++++-----------
 .../FacilityOrganizationView.tsx              | 15 ++----------
 .../components/FacilityOrganizationLayout.tsx | 13 ++++++++++-
 .../components/OrganizationLayoutSkeleton.tsx |  4 ++--
 8 files changed, 36 insertions(+), 65 deletions(-)

diff --git a/src/components/Common/SkeletonLoading.tsx b/src/components/Common/SkeletonLoading.tsx
index 2bf8878872d..9200b38095f 100644
--- a/src/components/Common/SkeletonLoading.tsx
+++ b/src/components/Common/SkeletonLoading.tsx
@@ -56,7 +56,7 @@ export const TableSkeleton = ({ count }: { count: number }) => (
   </div>
 );
 
-export const NoteSkeleton = ({ count }: { count: number }) =>
+export const CardListSkeleton = ({ count }: { count: number }) =>
   Array.from({ length: count }, (_, index) => (
     <div key={index}>
       <div className="p-4 rounded-lg bg-gray-100 animate-pulse">
diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
index f5ba591cfe5..8d701f09393 100644
--- a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
+++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
@@ -5,6 +5,8 @@ import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
 import { Card } from "@/components/ui/card";
 
+import { CardListSkeleton } from "@/components/Common/SkeletonLoading";
+
 import routes from "@/Utils/request/api";
 import { formatDateTime, properCase } from "@/Utils/utils";
 import { Encounter } from "@/types/emr/encounter";
@@ -147,22 +149,8 @@ export default function QuestionnaireResponsesList({ encounter }: Props) {
             </PaginatedList.WhenEmpty>
 
             <PaginatedList.WhenLoading>
-              <div className="grid gap-4">
-                {Array.from({ length: 3 }).map((_, i) => (
-                  <Card
-                    key={i}
-                    className="flex items-center justify-between p-4"
-                  >
-                    <div className="flex items-start gap-4">
-                      <div className="h-5 w-5 animate-pulse rounded-full bg-muted" />
-                      <div className="space-y-2">
-                        <div className="h-4 w-48 animate-pulse rounded bg-muted" />
-                        <div className="h-3 w-32 animate-pulse rounded bg-muted" />
-                        <div className="h-3 w-40 animate-pulse rounded bg-muted" />
-                      </div>
-                    </div>
-                  </Card>
-                ))}
+              <div className="grid gap-5">
+                <CardListSkeleton count={3} />
               </div>
             </PaginatedList.WhenLoading>
 
diff --git a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
index bb50c83a39b..72cc2509391 100644
--- a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
+++ b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
@@ -7,6 +7,8 @@ import PaginatedList from "@/CAREUI/misc/PaginatedList";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
+import { CardListSkeleton } from "@/components/Common/SkeletonLoading";
+
 import routes from "@/Utils/request/api";
 import { formatDateTime, properCase } from "@/Utils/utils";
 import { QuestionnaireResponse } from "@/types/questionnaire/questionnaireResponse";
@@ -48,21 +50,7 @@ export const Updates = (props: PatientProps) => {
 
               <PaginatedList.WhenLoading>
                 <div className="grid gap-4">
-                  {Array.from({ length: 3 }).map((_, i) => (
-                    <Card
-                      key={i}
-                      className="flex items-center justify-between p-4"
-                    >
-                      <div className="flex items-start gap-4">
-                        <div className="h-5 w-5 animate-pulse rounded-full bg-muted" />
-                        <div className="space-y-2">
-                          <div className="h-4 w-48 animate-pulse rounded bg-muted" />
-                          <div className="h-3 w-32 animate-pulse rounded bg-muted" />
-                          <div className="h-3 w-40 animate-pulse rounded bg-muted" />
-                        </div>
-                      </div>
-                    </Card>
-                  ))}
+                  <CardListSkeleton count={4} />
                 </div>
               </PaginatedList.WhenLoading>
 
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index f19704644d2..9a898de5ba6 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -44,7 +44,7 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
-import { NoteSkeleton } from "@/components/Common/SkeletonLoading";
+import { CardListSkeleton } from "@/components/Common/SkeletonLoading";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -552,7 +552,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
               {messagesLoading ? (
                 <div className="flex-1 p-4">
                   <div className="space-y-4">
-                    <NoteSkeleton count={3} />
+                    <CardListSkeleton count={3} />
                   </div>
                 </div>
               ) : (
@@ -579,7 +579,7 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
                       {isFetchingNextPage && (
                         <div className="py-2">
                           <div className="space-y-4">
-                            <NoteSkeleton count={3} />
+                            <CardListSkeleton count={3} />
                           </div>
                         </div>
                       )}
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationUsers.tsx b/src/pages/FacilityOrganization/FacilityOrganizationUsers.tsx
index f467018fe08..ba50a278d52 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationUsers.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationUsers.tsx
@@ -8,6 +8,10 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 
 import { Avatar } from "@/components/Common/Avatar";
+import {
+  CardGridSkeleton,
+  CardListSkeleton,
+} from "@/components/Common/SkeletonLoading";
 import { UserStatusIndicator } from "@/components/Users/UserListAndCard";
 
 import routes from "@/Utils/request/api";
@@ -49,20 +53,11 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
   if (isLoadingUsers) {
     return (
       <FacilityOrganizationLayout id={id} facilityId={facilityId}>
-        <div className="space-y-4">
-          {Array.from({ length: 3 }).map((_, i) => (
-            <Card key={i}>
-              <CardContent className="p-6">
-                <div className="flex items-center space-x-4">
-                  <div className="h-12 w-12 rounded-full bg-gray-200 animate-pulse" />
-                  <div className="space-y-2 flex-1">
-                    <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-                    <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
+        <div className="grid gap-4">
+          <CardListSkeleton count={1} />
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <CardGridSkeleton count={6} />
+          </div>
         </div>
       </FacilityOrganizationLayout>
     );
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationView.tsx b/src/pages/FacilityOrganization/FacilityOrganizationView.tsx
index c49087ef6f4..83e34e5df7a 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationView.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationView.tsx
@@ -11,6 +11,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 
 import Pagination from "@/components/Common/Pagination";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -79,19 +80,7 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
 
         {isLoading ? (
           <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="space-y-4">
-                    <div className="h-6 bg-gray-200 rounded animate-pulse w-1/2" />
-                    <div className="space-y-2">
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/4" />
-                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
+            <CardGridSkeleton count={6} />
           </div>
         ) : (
           <div className="space-y-6">
diff --git a/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx b/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx
index f975d5e2cdd..914429d74fe 100644
--- a/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx
+++ b/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx
@@ -11,8 +11,10 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -61,7 +63,16 @@ export default function FacilityOrganizationLayout({
   });
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <div className="px-6 py-6 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-8 w-8/12 self-end" />
+        <Skeleton className="h-8 w-full self-end" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <CardGridSkeleton count={6} />
+        </div>
+      </div>
+    );
   }
   // add loading state
   if (!org) {
diff --git a/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
index a472c5f520e..7d9955a7367 100644
--- a/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
+++ b/src/pages/Organization/components/OrganizationLayoutSkeleton.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 import {
   CardGridSkeleton,
-  NoteSkeleton,
+  CardListSkeleton,
 } from "@/components/Common/SkeletonLoading";
 
 export default function OrganizationLayoutSkeleton() {
@@ -11,7 +11,7 @@ export default function OrganizationLayoutSkeleton() {
       <Skeleton className="h-8 w-48 mb-4" />
       <Skeleton className="h-4 w-24 mb-4" />
       <div className="flex space-x-4 mb-4">
-        <NoteSkeleton count={3} />
+        <CardListSkeleton count={3} />
       </div>
       <Skeleton className="h-6 w-40 mb-4" />
       <Skeleton className="h-8 w-1/4 mb-4" />