From 0300694986c787b2c345d95cd503f03e93ce1183 Mon Sep 17 00:00:00 2001
From: amjed-ali-k <amjedmgm@gmail.com>
Date: Sun, 15 Oct 2023 12:01:56 +0530
Subject: [PATCH] feat: add skelton + skip auth in localhost

---
 .../history/_components/historyTable.tsx          | 11 +++++++++--
 src/components/ui/skeleton.tsx                    | 15 +++++++++++++++
 src/middleware.ts                                 |  6 ++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/skeleton.tsx

diff --git a/src/app/dashboard/result-formatter/history/_components/historyTable.tsx b/src/app/dashboard/result-formatter/history/_components/historyTable.tsx
index fb4f024..b019321 100644
--- a/src/app/dashboard/result-formatter/history/_components/historyTable.tsx
+++ b/src/app/dashboard/result-formatter/history/_components/historyTable.tsx
@@ -32,7 +32,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -49,6 +48,7 @@ import { mutate } from "swr";
 import { ExamResultSingleApiType } from "@/app/api/secure/sbte-result/single/[resultId]/route";
 import { convertToXlsx } from "@/app/lib/main";
 import { writeFile } from "xlsx-js-style";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const handleResultDownload = (id: string) => {
   axios
@@ -197,7 +197,7 @@ export const columns: ColumnDef<ExamResultHistoryApiType[0]>[] = [
 ];
 
 export function HistoryTable() {
-  const { data: apiData } = useGet<ExamResultHistoryApiType>(
+  const { data: apiData, isLoading } = useGet<ExamResultHistoryApiType>(
     "/api/secure/sbte-result/history"
   );
 
@@ -245,6 +245,13 @@ export function HistoryTable() {
             ))}
           </TableHeader>
           <TableBody>
+            {isLoading && (
+              <TableRow>
+                <TableCell colSpan={columns.length}>
+                  <Skeleton className="w-full h-[20px]" />
+                </TableCell>
+              </TableRow>
+            )}
             {table.getRowModel().rows?.length > 0 ? (
               table.getRowModel().rows.map((row) => (
                 <TableRow
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/src/middleware.ts b/src/middleware.ts
index 1b0be03..608721e 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -3,6 +3,12 @@ import { NextResponse, NextRequest } from "next/server";
 import { fetchUserId, getUserId } from "@/components/auth/server";
 
 export async function middleware(req: NextRequest) {
+  // If localHost is true, we are running in development mode, so we can skip authentication
+  const localHost = req.headers.get("host")?.startsWith("localhost");
+  if (localHost) {
+    return NextResponse.next();
+  }
+
   try {
     const hanko = req.cookies.get("hanko")?.value;
     if (!hanko) {