ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-24 13:01:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #23 from prowler-cloud/PRWLR-4367-add-react-suspense

Browse Source 
Add React Suspense
This commit is contained in:
Pablo Lara
2024-08-01 10:30:59 +02:00
committed by GitHub
parent 941bdfb2e1 d431516270
commit 14a10fc6f0
3 changed files with 88 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(prowler)/providers/page.tsx
+22 -7
View File
@@ -1,11 +1,16 @@
import { Spacer } from "@nextui-org/react";
import React from "react";
import React, { Suspense } from "react";
import { ColumnsProviders, DataTable, Header, ModalWrap } from "@/components";
import {
ColumnsProviders,
DataTable,
Header,
ModalWrap,
SkeletonTableProvider,
} from "@/components";
import { getProvider } from "@/lib/actions";
export default async function Providers() {
const providers = await getProvider();
const onSave = async () => {
"use server";
// event we want to pass down, ex. console.log("### hello");
@@ -28,11 +33,21 @@ export default async function Providers() {
openButtonLabel="Add Cloud Accounts"
/>
<Spacer y={6} />
<DataTable
columns={ColumnsProviders}
data={providers?.providers?.data ?? []}
/>
<Suspense fallback={<SkeletonTableProvider />}>
<SSRDataTable />
</Suspense>
</div>
</>
);
}
const SSRDataTable = async () => {
const providersData = await getProvider();
const [providers] = await Promise.all([providersData]);
return (
<DataTable
columns={ColumnsProviders}
data={providers?.providers?.data ?? []}
/>
);
};
components/index.ts
+1
View File
@@ -3,6 +3,7 @@ export * from "./providers/ProviderInfo";
export * from "./providers/ScanStatus";
export * from "./providers/table/ColumnsProviders";
export * from "./providers/table/DataTable";
export * from "./providers/table/SkeletonTableProvider";
export * from "./ui/alert/Alert";
export * from "./ui/header/Header";
export * from "./ui/modal";
components/providers/table/SkeletonTableProvider.tsx
+65
View File
@@ -0,0 +1,65 @@
import { Card, Skeleton } from "@nextui-org/react";
import React from "react";
export const SkeletonTableProvider = () => {
return (
<Card className="w-full h-full space-y-5 p-4" radius="sm">
{/* Table headers */}
<div className="hidden md:flex justify-between">
<Skeleton className="w-1/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
</Skeleton>
<Skeleton className="w-2/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
</Skeleton>
<Skeleton className="w-1/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
</Skeleton>
<Skeleton className="w-1/12 rounded-lg">
<div className="h-8 bg-default-200"></div>
</Skeleton>
</div>
{/* Table body */}
<div className="space-y-3">
{[...Array(3)].map((_, index) => (
<div
key={index}
className="flex flex-col md:flex-row justify-between items-center space-x-0 md:space-x-4"
>
<Skeleton className="w-full md:w-1/12 rounded-lg mb-2 md:mb-0">
<div className="h-12 bg-default-300"></div>
</Skeleton>
<Skeleton className="w-full md:w-2/12 rounded-lg mb-2 md:mb-0">
<div className="h-12 bg-default-300"></div>
</Skeleton>
<Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
<div className="h-12 bg-default-300"></div>
</Skeleton>
<Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
<div className="h-12 bg-default-300"></div>
</Skeleton>
<Skeleton className="hidden sm:flex md:w-2/12 rounded-lg mb-2 md:mb-0">
<div className="h-12 bg-default-300"></div>
</Skeleton>
<Skeleton className="hidden sm:flex md:w-1/12 rounded-lg mb-2 md:mb-0">
<div className="h-12 bg-default-300"></div>
</Skeleton>
<Skeleton className="hidden sm:flex md:w-1/12 rounded-lg mb-2 md:mb-0">
<div className="h-12 bg-default-300"></div>
</Skeleton>
</div>
))}
</div>
</Card>
);
};