Update package-lock.json

package.json

@@ -48,7 +48,6 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "eslint": "^8",
-    "eslint-config-next": "13.5.5",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "flowbite": "^1.8.1",
@@ -57,12 +56,12 @@
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.460.0",
-    "next": "13.5.7",
+    "next": "^14.2.28",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
-    "react": "^18",
+    "react": "^18.3.1",
     "react-day-picker": "^8.9.1",
-    "react-dom": "^18",
+    "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-hot-toast": "^2.4.1",
     "react-hotjar": "^6.2.0",
@@ -78,6 +77,7 @@
   },
   "devDependencies": {
     "cypress": "^13.13.0",
+    "eslint-config-next": "^14.2.28",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3"

src/layouts/AppLayout.tsx

@@ -3,12 +3,13 @@
 import "../app/globals.css";
 import { DisableDarkReader } from "@components/DisableDarkReader";
 import { TooltipProvider } from "@components/Tooltip";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
 import { cn } from "@utils/helpers";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import { Viewport } from "next/dist/lib/metadata/types/extra-types";
+import { Viewport } from "next";
 import localFont from "next/font/local";
-import React from "react";
+import React, { Suspense } from "react";
 import { Toaster } from "react-hot-toast";
 import OIDCProvider from "@/auth/OIDCProvider";
 import AnalyticsProvider from "@/contexts/AnalyticsProvider";
@@ -34,27 +35,29 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body className={cn(inter.className, "dark:bg-nb-gray bg-gray-50")}>
-        <AnalyticsProvider>
-          <DialogProvider>
-            <GlobalThemeProvider>
-              <ErrorBoundaryProvider>
-                <OIDCProvider>
-                  <TooltipProvider delayDuration={0}>
-                    {children}
-                  </TooltipProvider>
-                </OIDCProvider>
-              </ErrorBoundaryProvider>
-            </GlobalThemeProvider>
-          </DialogProvider>
-          <Toaster
-            position={"top-center"}
-            toastOptions={{
-              duration: 3000,
-            }}
-          />
-          <NavigationEvents />
-          <DisableDarkReader />
-        </AnalyticsProvider>
+        <Suspense fallback={<FullScreenLoading />}>
+          <AnalyticsProvider>
+            <DialogProvider>
+              <GlobalThemeProvider>
+                <ErrorBoundaryProvider>
+                  <OIDCProvider>
+                    <TooltipProvider delayDuration={0}>
+                      {children}
+                    </TooltipProvider>
+                  </OIDCProvider>
+                </ErrorBoundaryProvider>
+              </GlobalThemeProvider>
+            </DialogProvider>
+            <Toaster
+              position={"top-center"}
+              toastOptions={{
+                duration: 3000,
+              }}
+            />
+            <NavigationEvents />
+            <DisableDarkReader />
+          </AnalyticsProvider>
+        </Suspense>
       </body>
     </html>
   );