diff --git a/app/layout.tsx b/app/layout.tsx index 57499b5..b97b91f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,47 +1,50 @@ +import type { Metadata } from "next"; +import { Figtree, Space_Grotesk } from "next/font/google"; +import ClientLayout from "@/components/common/ClientLayout"; + import 'swiper/css'; import "swiper/css/navigation"; import "swiper/css/pagination"; -import "/public/assets/css/vendor/aos.css" -import "/public/assets/css/vendor/bootstrap.min.css" -import "/public/assets/css/vendor/fontawesome.css" -import "/public/assets/css/vendor/magnific-popup.css" -import "/public/assets/css/vendor/mobile.css" -// import "/public/assets/css/vendor/owlcarousel.min.css" -import "/public/assets/css/vendor/sidebar.css" -import "/public/assets/css/vendor/slick-slider.css" -import "/public/assets/css/vendor/nice-select.css" -import "/public/assets/css/vendor/odometer.css" -import "/public/assets/css/main.css" - -import type { Metadata } from "next" -import { Figtree, Space_Grotesk } from "next/font/google" +import "/public/assets/css/vendor/aos.css"; +import "/public/assets/css/vendor/bootstrap.min.css"; +import "/public/assets/css/vendor/fontawesome.css"; +import "/public/assets/css/vendor/magnific-popup.css"; +import "/public/assets/css/vendor/mobile.css"; +import "/public/assets/css/vendor/sidebar.css"; +import "/public/assets/css/vendor/slick-slider.css"; +import "/public/assets/css/vendor/nice-select.css"; +import "/public/assets/css/vendor/odometer.css"; +import "/public/assets/css/main.css"; const figtree = Figtree({ - weight: ['300', '400', '500', '600', '700', '800', '900'], - subsets: ['latin'], - variable: "--figtree", - display: 'swap', -}) + weight: ['300', '400', '500', '600', '700', '800', '900'], + subsets: ['latin'], + variable: "--figtree", + display: 'swap', +}); + const grotesk = Space_Grotesk({ - weight: ['300', '400', '500', '600', '700'], - subsets: ['latin'], - variable: "--grotesk", - display: 'swap', -}) + weight: ['300', '400', '500', '600', '700'], + subsets: ['latin'], + variable: "--grotesk", + display: 'swap', +}); export const metadata: Metadata = { - title: "Tamil Culture Association", - description: "Tamil Culture Association waterloo region", -} + title: "Tamil Culture Association", + description: "Tamil Culture Association waterloo region", +}; export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode -}>) { - return ( - - {children} - - ) + children, +}: { + children: React.ReactNode; +}) { + return ( + + + {children} + + + ); } diff --git a/app/loading.tsx b/app/loading.tsx index a81e714..740a5ce 100644 --- a/app/loading.tsx +++ b/app/loading.tsx @@ -1,14 +1,14 @@ -export default function Preloader() { - return ( - <> -
-
-
-
-
-
+import React from 'react'; - - - ) +export default function Preloader({ fadeOut }: { fadeOut?: boolean }) { + return ( +
+
+
+
+ Loading... +
+
+
+ ); } diff --git a/components/common/ClientLayout.tsx b/components/common/ClientLayout.tsx new file mode 100644 index 0000000..60f5a23 --- /dev/null +++ b/components/common/ClientLayout.tsx @@ -0,0 +1,37 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; +import { usePathname } from 'next/navigation'; +import Preloader from '@/app/loading'; + +export default function ClientLayout({ children }: { children: React.ReactNode }) { + const pathname = usePathname(); + const [isLoading, setIsLoading] = useState(true); + const [fadeOut, setFadeOut] = useState(false); + + useEffect(() => { + setIsLoading(true); + setFadeOut(false); + + const start = Date.now(); + const minDuration = 1200; + const loadDelay = () => { + const duration = Date.now() - start; + const remaining = Math.max(0, minDuration - duration); + + setTimeout(() => { + setFadeOut(true); + setTimeout(() => setIsLoading(false), 600); + }, remaining); + }; + + loadDelay(); + }, [pathname]); + + return ( + <> + {isLoading && } + {!isLoading && children} + + ); +} diff --git a/public/assets/scss/main.scss b/public/assets/scss/main.scss index 0be83e1..06241ea 100644 --- a/public/assets/scss/main.scss +++ b/public/assets/scss/main.scss @@ -1,14 +1,49 @@ -/* -============================ -Name: Eventify- Event And Conference Templete -Version: 2.0.0 -Description: Eventify- Event And Conference Templete -Author: alithemes -Author URI: https://themeforest.net/user/alithemes/portfolio -Location: -============================ -*/ - @forward "theme"; @forward "components"; @forward "layout"; + + +.preloader { + position: fixed; + inset: 0; + background-color: white; + z-index: 9999; + display: flex; + justify-content: center; + align-items: center; +} + +.loading-container { + text-align: center; +} + +.loading { + width: 40px; + height: 40px; + border: 5px solid #ccc; + border-top: 5px solid #000; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +#loading-icon img { + width: 100px; + margin-top: 20px; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.preloader { + transition: opacity 0.6s ease; + opacity: 1; + pointer-events: all; +} + +.preloader.fade-out { + opacity: 0; + pointer-events: none; +}