Care Loading icon in organization and facility users

public/locale/en.json

@@ -1295,7 +1295,12 @@
   "oral_issue_for_non_oral_nutrition_route_error": "Can be specified only if nutrition route is set to Oral",
   "ordering": "Ordering",
   "organization": "Organization",
+  "organization_access": "You don't have access to any organizations yet.",
+  "organization_facility": "Facility Organizations",
   "organization_for_care_support": "Organization for Care Support",
+  "organization_manage": "Organizations help you manage facilities, users, and resources efficiently. Contact your administrator to get access.",
+  "organization_not_found": "No Organizations Found",
+  "organizations": "Organizations",
   "origin_facility": "Current facility",
   "other_details": "Other details",
   "otp_verification_error": "Failed to verify OTP. Please try again later.",

src/components/Facility/FacilityUsers.tsx

@@ -4,6 +4,9 @@ import { useTranslation } from "react-i18next";
 
 import CountBlock from "@/CAREUI/display/Count";
 
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
 import Page from "@/components/Common/Page";
 import UserListView from "@/components/Users/UserListAndCard";
 
@@ -30,7 +33,49 @@ export default function FacilityUsers(props: { facilityId: number }) {
   });
 
   if (userListLoading) {
-    return <div>Loading...</div>;
+    return (
+      <div className="px-6">
+        <Skeleton className="h-8 w-32 mb-4" />
+        <div className="flex items-center mb-4">
+          <Skeleton className="h-16 w-16 rounded-lg mr-3" />
+          <div>
+            <Skeleton className="h-4 w-14 mb-1" />
+            <Skeleton className="h-12 w-8" />
+          </div>
+        </div>
+        <div className="flex items-center justify-between mb-4">
+          <Skeleton className="h-10 w-72" />
+          <div className="flex space-x-2">
+            <Skeleton className="h-10 w-32" />
+            <Skeleton className="h-10 w-32" />
+          </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">
+                  <Skeleton className="h-16 w-16 rounded-lg mr-4" />
+                  <div className="flex-1">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <Skeleton className="h-6 w-24 mb-1" />
+                        <Skeleton className="h-4 w-12" />
+                      </div>
+                      <Skeleton className="h-6 w-16" />
+                    </div>
+                    <div className="mt-2">
+                      <Skeleton className="h-4 w-20 mb-1" />
+                      <Skeleton className="h-4 w-12" />
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
   }
   if (!userListData) {
     return <div>{t("no_users_found")}</div>;

src/pages/FacilityOrganization/FacilityOrganizationIndex.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";
 
@@ -27,6 +28,7 @@ export default function FacilityOrganizationIndex({
 }: {
   facilityId: string;
 }) {
+  const { t } = useTranslation();
   const { data, isLoading } = useQuery({
     queryKey: ["facilityOrganization", "list", facilityId],
     queryFn: query(routes.facilityOrganization.list, {
@@ -37,50 +39,47 @@ export default function FacilityOrganizationIndex({
 
   if (isLoading) {
     return (
-      <Page title="Organizations">
+      <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: 3 }).map((_, i) => (
-            <Card key={i} className="relative">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i} className="relative space-y-4">
               <CardHeader>
-                <Skeleton className="h-6 w-2/3" />
-                <Skeleton className="h-4 w-1/2" />
+                <Skeleton className="h-6 w-1/3" />
+                <Skeleton className="h-4 w-1/4" />
               </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" />
+                <Skeleton className="h-10 w-full" />
               </CardFooter>
             </Card>
           ))}
         </div>
-      </Page>
+      </div>
     );
   }
 
   if (!data?.results?.length) {
     return (
-      <Page title="Organizations">
+      <Page title={t("organizations")}>
         <div className="flex justify-end mb-4">
           <CreateFacilityOrganizationSheet facilityId={facilityId} />
         </div>
         <Card className="border-dashed">
           <CardHeader>
             <CardTitle className="text-xl font-semibold text-center">
-              No Organizations Found
+              {t("organization_not_found")}
             </CardTitle>
             <CardDescription className="text-center">
-              You don't have access to any organizations yet.
+              {t("organization_access")}
             </CardDescription>
           </CardHeader>
           <CardContent className="flex flex-col items-center justify-center p-6">
             <div className="rounded-full bg-primary/10 p-6 mb-4">
               <CareIcon icon="d-hospital" className="h-12 w-12 text-primary" />
             </div>
             <p className="text-center text-sm text-muted-foreground max-w-sm mb-4">
-              Organizations help you manage facilities, users, and resources
-              efficiently. Contact your administrator to get access.
+              {t("organization_manage")}
             </p>
           </CardContent>
         </Card>
@@ -89,7 +88,7 @@ export default function FacilityOrganizationIndex({
   }
 
   return (
-    <Page title="Facility Organizations" hideBack={true}>
+    <Page title={t("organization_facility")} hideBack={true}>
       <div className="flex justify-end mb-4">
         <CreateFacilityOrganizationSheet facilityId={facilityId} />
       </div>
@@ -111,7 +110,7 @@ export default function FacilityOrganizationIndex({
                   href={`/facility/${facilityId}/organization/${org.id}`}
                   className="flex items-center justify-center gap-2"
                 >
-                  View Details
+                  {t("view_details")}
                   <CareIcon icon="l-arrow-right" className="h-4 w-4" />
                 </Link>
               </Button>

src/pages/Organization/components/OrganizationLayout.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link, usePath } from "raviger";
+import { useTranslation } from "react-i18next";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
@@ -10,7 +11,9 @@ 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";
 
@@ -40,6 +43,7 @@ export default function OrganizationLayout({
   children,
 }: Props) {
   const path = usePath() || "";
+  const { t } = useTranslation();
 
   const baseUrl = navOrganizationId
     ? `/organization/${navOrganizationId}/children`
@@ -76,11 +80,43 @@ export default function OrganizationLayout({
   });
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    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>
+    );
   }
   // add loading state
   if (!org) {
-    return <div>Not found</div>;
+    return <div>{t("organization_not_found")}</div>;
   }
 
   const orgParents: OrganizationParent[] = [];