From 89d15c40da5a8e57ffb0ec3529c2bcf898c5c1d6 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Wed, 31 Jul 2024 21:52:59 +0200
Subject: [PATCH 1/2] feat: update TypeScript to the latest version

---
 app/(prowler)/providers/page.tsx              | 29 +++++++--
 components/index.ts                           |  1 +
 .../providers/table/SkeletonTableProvider.tsx | 65 +++++++++++++++++++
 package.json                                  |  2 +-
 4 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 components/providers/table/SkeletonTableProvider.tsx

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index 4301b83e37..df2b7c01e8 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -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 ?? []}
+    />
+  );
+};
diff --git a/components/index.ts b/components/index.ts
index cc6a14b022..4cad0baacf 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -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";
diff --git a/components/providers/table/SkeletonTableProvider.tsx b/components/providers/table/SkeletonTableProvider.tsx
new file mode 100644
index 0000000000..e43ca38cab
--- /dev/null
+++ b/components/providers/table/SkeletonTableProvider.tsx
@@ -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>
+  );
+};
diff --git a/package.json b/package.json
index 65480a62fd..9178826cb9 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "postcss": "8.4.38",
     "tailwind-variants": "0.1.20",
     "tailwindcss": "3.4.3",
-    "typescript": "5.0.4",
+    "typescript": "^5.5.4",
     "usehooks-ts": "^3.1.0"
   },
   "name": "prowler-next-app",

From d431516270dbaf3fedd0b09e11b8fed94714f107 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Wed, 31 Jul 2024 21:56:50 +0200
Subject: [PATCH 2/2] chore:remove library not used for icons

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 9178826cb9..caad2dcdb8 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
     "@nextui-org/react": "^2.4.2",
     "@nextui-org/system": "2.2.1",
     "@nextui-org/theme": "2.2.5",
-    "@radix-ui/react-icons": "^1.3.0",
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",
     "@tanstack/react-table": "^8.19.3",