iNocturnis/NullTranslationWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Suspense to the entire layout, because our server sucks and sometime giving people the suspense loading page is a good look while the server is fetching and sending back the new page

Browse Source
This commit is contained in:
Hieuhuy Pham 2025-01-22 05:36:56 -05:00
parent 1b274884e8
commit 1d66201478
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/layout.tsx
View File

@ -2,9 +2,8 @@
import "tailwindcss/tailwind.css";
import Script from "next/script";
import React, { useEffect, useState } from "react";
import React, { Suspense, useEffect, useState } from "react";
import NightModeToggle from "@/components/NightModeToggle";
import Navbar from "@/components/NavigationBar";
import KofiWidget from "@/components/KofiWidget";
@ -34,6 +33,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
document.documentElement.classList.toggle("dark", !isDarkMode);
};
const Default_Fallback = () => (
<div className="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-300">
<img
src="/logo.png" // Replace this with the actual path to your logo
alt="Loading..."
className="h-16 w-16 animate-bounce" // Add animation if desired
/>
<span className="ml-3 text-lg">Loading content...</span>
</div>
)
return (
<html lang="en" className={isDarkMode ? "dark" : ""} suppressHydrationWarning>
<head>
@ -72,7 +82,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
<KofiWidget />
<Navbar />
<main className="relative">{children}</main>
<Suspense fallback={<Default_Fallback />}>
<main className="relative">{children}</main>
</Suspense>
<div className="fixed bottom-4 right-4">
<NightModeToggle isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
</div>