fix local build error by updating packages and adding back loading state

app/layout.tsx

@@ -2,10 +2,8 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 
 import Providers from '@/components/react-query/provider'
-import SiteLoad from '@/components/site-loading'
 import { ThemeProvider } from '@/components/ui/theme-provider'
 import { Toaster } from '@/components/ui/toaster'
-import { Suspense } from 'react'
 
 const inter = Inter({ subsets: ['latin'] })
 

app/loading.tsx

+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+    return (
+        <main className="main-content">
+            <div className="flex justify-center">
+                <Card className="p-6 w-full">
+                    <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8">
+                        {Array.from({ length: 18 }, (_, i) => i + 1).map((i) => (
+                            <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
+                        ))}
+                    </div>
+                </Card>
+            </div>
+        </main>
+    )
+}
\ No newline at end of file

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.0",
-    "@hookform/resolvers": "^3.1.0",
+    "@hookform/resolvers": "^3.1.1",
     "@prisma/client": "^4.15.0",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
@@ -24,33 +24,33 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@t3-oss/env-nextjs": "^0.4.0",
-    "@tanstack/react-query": "^4.29.12",
+    "@t3-oss/env-nextjs": "^0.4.1",
+    "@tanstack/react-query": "^4.29.14",
     "bcrypt": "^5.1.0",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
-    "lucide-react": "^0.236.0",
-    "next": "^13.4.4",
+    "lucide-react": "^0.246.0",
+    "next": "^13.4.6",
     "next-auth": "^4.22.1",
     "next-themes": "^0.2.1",
     "normalize-diacritics": "^4.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.44.3",
+    "react-hook-form": "^7.45.0",
     "react-infinite-scroll-component": "^6.1.0",
-    "tailwind-merge": "^1.13.0",
-    "tailwindcss-animate": "^1.0.5",
+    "tailwind-merge": "^1.13.2",
+    "tailwindcss-animate": "^1.0.6",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^4.29.9",
     "@types/bcrypt": "^5.0.0",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.8",
-    "@types/react-dom": "^18.2.4",
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
     "autoprefixer": "10.4.14",
-    "eslint": "^8.42.0",
-    "eslint-config-next": "^13.4.4",
+    "eslint": "^8.43.0",
+    "eslint-config-next": "^13.4.6",
     "postcss": "8.4.24",
     "prisma": "^4.15.0",
     "tailwindcss": "3.3.2",