Skip to content

Commit

Permalink
Skeleton loader for organization and user of facility
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rishith25
Rishith25 committed Jan 5, 2025
1 parent 927969e commit fc4a7d5
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 21 deletions.
47 changes: 45 additions & 2 deletions src/components/Facility/FacilityUsers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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({
Expand Down Expand Up @@ -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>;
Expand Down
32 changes: 17 additions & 15 deletions src/pages/FacilityOrganization/FacilityOrganizationIndex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

import Page from "@/components/Common/Page";

Expand All @@ -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>
);
}

Expand Down
3 changes: 1 addition & 2 deletions src/pages/FacilityOrganization/components/FacilityOrganizationLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -62,7 +61,7 @@ export default function FacilityOrganizationLayout({
});

if (isLoading) {
return <Loading />;
return <div>Loading...</div>;
}
// add loading state
if (!org) {
Expand Down
40 changes: 38 additions & 2 deletions src/pages/Organization/components/OrganizationLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit fc4a7d5

Please sign in to comment.