Move all the Skeletons to seperate file

public/locale/en.json

@@ -380,6 +380,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 {{formats}}.",
   "already_a_member": "Already a member?",
@@ -765,6 +766,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?",
   "diet_preference": "Diet Preference",
@@ -2011,6 +2013,7 @@
   "switch_bed": "Switch Bed",
   "switch_camera_is_not_available": "Switch camera is not available.",
   "symptoms": "Symptoms",
+  "symptoms_empty_message": "No symptoms recorded",
   "systolic": "Systolic",
   "tachycardia": "Tachycardia",
   "tag_name": "Tag Name",

src/components/Common/SkeletonLoading.tsx

@@ -0,0 +1,111 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+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 */}
+      <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 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">
+              <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 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>
+  ));
+
+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>
+                </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>
+  ));

src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx

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

src/components/Facility/FacilityUsers.tsx

@@ -5,116 +5,21 @@ 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 {
+  CardGridSkeleton,
+  TableSkeleton,
+} from "@/components/Common/SkeletonLoading";
 import UserListAndCardView from "@/components/Users/UserListAndCard";
 
 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({
@@ -141,7 +46,13 @@ 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">
+          <CardGridSkeleton count={6} />
+        </div>
+      ) : (
+        <TableSkeleton count={7} />
+      );
   } else {
     usersList = (
       <div>

src/components/Patient/PatientDetailsTab/patientUpdates.tsx

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

src/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 { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 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">
@@ -690,14 +660,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 />
-            </>
+            <CardGridSkeleton count={6} />
           ) : encounters.length === 0 ? (
             <div className="col-span-full">
               <EmptyState />