Skip to content

Commit

Permalink
Move all the Skeletons to seperate file (ohcnetwork#9982)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdityaJ2305
AdityaJ2305 authored Jan 22, 2025
1 parent ea24a51 commit 5a566b3
Show file tree
Hide file tree
Showing 18 changed files with 210 additions and 365 deletions.
3 changes: 3 additions & 0 deletions public/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,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?",
Expand Down Expand Up @@ -767,6 +768,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",
Expand Down Expand Up @@ -2024,6 +2026,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",
Expand Down
111 changes: 111 additions & 0 deletions src/components/Common/SkeletonLoading.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 CardListSkeleton = ({ 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>
));
20 changes: 4 additions & 16 deletions src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -147,22 +149,8 @@ export default function QuestionnaireResponsesList({ encounter }: Props) {
</PaginatedList.WhenEmpty>

<PaginatedList.WhenLoading>
<div className="grid gap-4">
{[1, 2, 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>

Expand Down
111 changes: 11 additions & 100 deletions src/components/Facility/FacilityUsers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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>
Expand Down
18 changes: 3 additions & 15 deletions src/components/Patient/PatientDetailsTab/patientUpdates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -48,21 +50,7 @@ export const Updates = (props: PatientProps) => {

<PaginatedList.WhenLoading>
<div className="grid gap-4">
{[1, 2, 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>

Expand Down
Loading

0 comments on commit 5a566b3

Please sign in to comment.