feat: update TypeScript to the latest version

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 ?? []}
+    />
+  );
+};

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";

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>
+  );
+};

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",