From fc4a7d5dc7107a8ae9c4372ef9c4d55854afdca1 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Sun, 5 Jan 2025 18:04:42 +0530
Subject: [PATCH] Skeleton loader for organization and user of facility

---
 src/components/Facility/FacilityUsers.tsx     | 47 ++++++++++++++++++-
 .../FacilityOrganizationIndex.tsx             | 32 +++++++------
 .../components/FacilityOrganizationLayout.tsx |  3 +-
 .../components/OrganizationLayout.tsx         | 40 +++++++++++++++-
 4 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
index e890af1b381..ccbdd17407b 100644
--- a/src/components/Facility/FacilityUsers.tsx
+++ b/src/components/Facility/FacilityUsers.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 
 import CountBlock from "@/CAREUI/display/Count";
 
-import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 import UserListView from "@/components/Users/UserListAndCard";
 
@@ -14,6 +13,8 @@ import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 
+import { Card, CardContent } from "../ui/card";
+
 export default function FacilityUsers(props: { facilityId: number }) {
   const { t } = useTranslation();
   const { qParams, updateQuery, Pagination } = useFilters({
@@ -42,7 +43,49 @@ export default function FacilityUsers(props: { facilityId: number }) {
   });
 
   if (userListLoading) {
-    return <Loading />;
+    return (
+      <div className="px-6">
+        <div className="h-8 w-32 bg-gray-200 rounded animate-pulse mb-4"></div>
+        <div className="flex items-center mb-4">
+          <div className="h-16 w-16 bg-gray-200 flex h-16 w-16 items-center justify-center rounded-lg animate-pulse mr-3"></div>
+          <div>
+            <div className="h-4 w-14 bg-gray-200 rounded animate-pulse mb-1"></div>
+            <div className="h-12 w-8 bg-gray-200 rounded animate-pulse"></div>
+          </div>
+        </div>
+        <div className="flex items-center justify-between mb-4">
+          <div className="h-10 w-72 bg-gray-200 rounded animate-pulse"></div>
+          <div className="flex space-x-2">
+            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse"></div>
+            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse"></div>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i}>
+              <CardContent className="p-6">
+                <div className="flex items-start">
+                  <div className="h-16 w-16 bg-gray-200 rounded-lg animate-pulse mr-4"></div>{" "}
+                  <div className="flex-1">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <div className="h-6 w-24 bg-gray-200 rounded animate-pulse mb-1"></div>{" "}
+                        <div className="h-4 w-12 bg-gray-200 rounded animate-pulse"></div>{" "}
+                      </div>
+                      <div className="h-6 w-16 bg-gray-200 rounded animate-pulse"></div>{" "}
+                    </div>
+                    <div className="mt-2">
+                      <div className="h-4 w-20 bg-gray-200 rounded animate-pulse mb-1"></div>
+                      <div className="h-4 w-12 bg-gray-200 rounded animate-pulse"></div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
   }
   if (!userListData) {
     return <div>No users found</div>;
diff --git a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
index 38baf3787d1..5f5977f1dbe 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
@@ -12,7 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
 
 import Page from "@/components/Common/Page";
 
@@ -37,25 +36,28 @@ export default function FacilityOrganizationIndex({
 
   if (isLoading) {
     return (
-      <Page title="Organizations">
+      <div className="px-6 py-6">
+        <div className="flex justify-between items-center mt-6">
+          <div className="h-8 w-48 bg-gray-300 rounded animate-pulse" />
+        </div>
+        <div className="flex justify-between items-center mb-6">
+          <div></div>
+          <div className="h-8 w-48 bg-gray-300 rounded animate-pulse" />
+        </div>
         <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" />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i}>
+              <CardContent className="p-6">
+                <div className="flex justify-between items-center mb-4">
+                  <div className="h-6 w-1/4 bg-gray-300 rounded animate-pulse" />
+                  <div className="h-4 w-1/4 bg-gray-300 rounded animate-pulse" />
+                </div>
+                <div className="flex justify-between items-center h-7 w-full bg-gray-300 rounded animate-pulse" />
               </CardContent>
-              <CardFooter>
-                <Skeleton className="h-8 w-24" />
-              </CardFooter>
             </Card>
           ))}
         </div>
-      </Page>
+      </div>
     );
   }
 
diff --git a/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx b/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx
index 74259cb460d..f975d5e2cdd 100644
--- a/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx
+++ b/src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx
@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/breadcrumb";
 import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 
-import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 
 import routes from "@/Utils/request/api";
@@ -62,7 +61,7 @@ export default function FacilityOrganizationLayout({
   });
 
   if (isLoading) {
-    return <Loading />;
+    return <div>Loading...</div>;
   }
   // add loading state
   if (!org) {
diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
index a7b91b31566..746afcaafb1 100644
--- a/src/pages/Organization/components/OrganizationLayout.tsx
+++ b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -10,9 +10,9 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { Card, CardContent } from "@/components/ui/card";
 import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 
-import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 
 import query from "@/Utils/request/query";
@@ -77,7 +77,43 @@ export default function OrganizationLayout({
   });
 
   if (isLoading) {
-    return <Loading />;
+    return (
+      <div className="p-4">
+        <div className="h-8 w-48 bg-gray-200 rounded animate-pulse mb-4"></div>
+        <div className="h-4 w-24 bg-gray-200 rounded animate-pulse mb-4"></div>
+        <div className="flex space-x-4 mb-4">
+          {[...Array(4)].map((_, index) => (
+            <div
+              key={index}
+              className="h-8 w-24 bg-gray-200 rounded animate-pulse"
+            ></div>
+          ))}
+        </div>
+
+        <div className="h-6 w-40 bg-gray-200 rounded animate-pulse mb-4"></div>
+        <div className="h-8 w-1/4 bg-gray-200 rounded animate-pulse mb-4"></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}>
+              <CardContent className="p-6">
+                <div className="flex space-x-4">
+                  <div className="flex-1 space-y-4">
+                    <div className="h-6 bg-gray-200 rounded animate-pulse w-1/2" />
+                    <div className="flex space-x-4">
+                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
+                      <div className="h-4 bg-gray-200 rounded animate-pulse w-1/3" />
+                    </div>
+                  </div>
+                  <div className="flex-1 flex items-center justify-center">
+                    <div className="h-6 bg-gray-200 rounded animate-pulse w-1/2" />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
   }
   // add loading state
   if (!org) {