Added Skeleton Loader for Care public page | Adjusted the roundness o…

…f Avatar (#10124)
ohcnetwork · Jan 24, 2025 · 19141a3 · 19141a3
1 parent 1dc821b
commit 19141a3
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 12 deletions.
diff --git a/src/components/Common/Avatar.tsx b/src/components/Common/Avatar.tsx
@@ -57,7 +57,7 @@ const Avatar = React.forwardRef<
   return (
     <AvatarPrimitive.Root
       ref={ref}
-      className={cn("w-full h-full", className)}
+      className={cn("w-full h-full rounded-md", className)}
       style={{
         background: bgColor,
       }}
@@ -66,7 +66,10 @@ const Avatar = React.forwardRef<
         <AvatarPrimitive.Image
           src={imageUrl}
           alt={name}
-          className="aspect-square h-full w-full object-cover"
+          className={cn(
+            "aspect-square h-full w-full object-cover rounded-md",
+            className,
+          )}
         />
       ) : (
         <AvatarPrimitive.Fallback className="flex h-full w-full select-none items-center justify-center text-center">

diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx
@@ -90,7 +90,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
         >
           <div className="flex justify-items-start gap-5 lg:justify-normal">
             <div className="flex flex-col items-start lg:items-center">
-              <div className="w-16 min-w-16 bg-secondary-200 h-16 md:w-24 md:h-24">
+              <div className="w-16 min-w-16 bg-secondary-200 h-16 md:w-24 md:h-24 rounded">
                 <Avatar name={patient.name} className="w-full h-full" />
               </div>
             </div>

diff --git a/src/components/ui/sidebar/patient-switcher.tsx b/src/components/ui/sidebar/patient-switcher.tsx
@@ -67,7 +67,7 @@ export function PatientSwitcher({ className }: PatientSwitcherProps) {
                 <div className="flex flex-row justify-between items-center gap-2 w-full text-primary-800">
                   <Avatar
                     name={patientUserContext.selectedPatient?.name || "User"}
-                    className="h-4 w-4"
+                    className="h-5 w-5"
                   />
                   <div className="flex flex-row items-center justify-between w-full gap-2">
                     <span className="font-semibold truncate max-w-32">
@@ -94,7 +94,7 @@ export function PatientSwitcher({ className }: PatientSwitcherProps) {
           {patientUserContext.patients?.map((patient) => (
             <SelectItem key={patient.id} value={patient.id}>
               <div className="flex flex-row items-center gap-2">
-                <Avatar name={patient.name} className="h-4 w-4" />
+                <Avatar name={patient.name} className="h-5 w-5" />
                 {patient.name}
               </div>
             </SelectItem>

diff --git a/src/pages/Appointments/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx
@@ -353,8 +353,8 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
         </Tabs>
       }
     >
-      <div className="mt-4 py-4 flex flex-col md:flex-row gap-4 justify-between border-t border-gray-200">
-        <div className="flex flex-col md:flex-row gap-4 items-start md:items-start">
+      <div className="mt-4 py-4 flex flex-col lg:flex-row gap-4 justify-between border-t border-gray-200">
+        <div className="flex flex-col xl:flex-row gap-4 items-start md:items-start">
           <div className="mt-1">
             <Label className="mb-2 text-black">
               {t("select_practitioner")}

diff --git a/src/pages/Facility/FacilitiesPage.tsx b/src/pages/Facility/FacilitiesPage.tsx
@@ -6,9 +6,9 @@ import { useTranslation } from "react-i18next";
 
 import { Card } from "@/components/ui/card";
 
-import Loading from "@/components/Common/Loading";
 import { LoginHeader } from "@/components/Common/LoginHeader";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
+import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 
 import useFilters from "@/hooks/useFilters";
 
@@ -106,7 +106,9 @@ export function FacilitiesPage() {
 
       <div className="flex flex-col w-full gap-4 mt-4">
         {isLoading ? (
-          <Loading />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+            <CardGridSkeleton count={6} />
+          </div>
         ) : !qParams.organization ? (
           <Card className="p-6">
             <div className="text-lg font-medium text-muted-foreground">

diff --git a/src/pages/Facility/components/UserCard.tsx b/src/pages/Facility/components/UserCard.tsx
@@ -48,7 +48,7 @@ export function UserCard({ user, className, facilityId }: Props) {
             <Avatar
               imageUrl={user.read_profile_picture_url}
               name={name}
-              className="h-32 w-32"
+              className="h-32 w-32 rounded-lg"
             />
 
             <div className="flex grow flex-col min-w-0">

diff --git a/src/pages/Patient/index.tsx b/src/pages/Patient/index.tsx
@@ -7,9 +7,10 @@ import { useTranslation } from "react-i18next";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-import Loading from "@/components/Common/Loading";
+import { CardListSkeleton } from "@/components/Common/SkeletonLoading";
 
 import { usePatientContext } from "@/hooks/usePatientUser";
 
@@ -65,7 +66,18 @@ function PatientIndex() {
   };
 
   if (isLoading) {
-    return <Loading />;
+    return (
+      <div>
+        <div className="flex justify-between w-full mb-8">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-8 w-48" />
+        </div>
+        <Skeleton className="h-8 w-48" />
+        <div className="grid gap-4 mt-4">
+          <CardListSkeleton count={6} />
+        </div>
+      </div>
+    );
   }
 
   const appointments = appointmentsData?.results