MetatroncubeSoftwareSolutions/TamilCulturalAssociation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loader Updated

Browse Source
This commit is contained in:
akashluca-l 2025-07-18 21:30:23 +05:30
parent 4791e5b427
commit a2e9a598d3
4 changed files with 134 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
app/layout.tsx
View File

@ -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';
import "swiper/css/navigation"; import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "/public/assets/css/vendor/aos.css" import "/public/assets/css/vendor/aos.css";
import "/public/assets/css/vendor/bootstrap.min.css" import "/public/assets/css/vendor/bootstrap.min.css";
import "/public/assets/css/vendor/fontawesome.css" import "/public/assets/css/vendor/fontawesome.css";
import "/public/assets/css/vendor/magnific-popup.css" import "/public/assets/css/vendor/magnific-popup.css";
import "/public/assets/css/vendor/mobile.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/sidebar.css" import "/public/assets/css/vendor/slick-slider.css";
import "/public/assets/css/vendor/slick-slider.css" import "/public/assets/css/vendor/nice-select.css";
import "/public/assets/css/vendor/nice-select.css" import "/public/assets/css/vendor/odometer.css";
import "/public/assets/css/vendor/odometer.css" import "/public/assets/css/main.css";
import "/public/assets/css/main.css"
import type { Metadata } from "next"
import { Figtree, Space_Grotesk } from "next/font/google"
const figtree = Figtree({ const figtree = Figtree({
weight: ['300', '400', '500', '600', '700', '800', '900'], weight: ['300', '400', '500', '600', '700', '800', '900'],
subsets: ['latin'], subsets: ['latin'],
variable: "--figtree", variable: "--figtree",
display: 'swap', display: 'swap',
}) });
const grotesk = Space_Grotesk({ const grotesk = Space_Grotesk({
weight: ['300', '400', '500', '600', '700'], weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'], subsets: ['latin'],
variable: "--grotesk", variable: "--grotesk",
display: 'swap', display: 'swap',
}) });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Tamil Culture Association", title: "Tamil Culture Association",
description: "Tamil Culture Association waterloo region", description: "Tamil Culture Association waterloo region",
} };
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: {
children: React.ReactNode children: React.ReactNode;
}>) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${figtree.variable} ${grotesk.variable}`}>{children}</body> <body className={`${figtree.variable} ${grotesk.variable}`}>
</html> <ClientLayout>{children}</ClientLayout>
) </body>
</html>
);
} }

24
app/loading.tsx
View File

@ -1,14 +1,14 @@
export default function Preloader() { import React from 'react';
return (
<>
<div className="preloader">
<div className="loading-container">
<div className="loading" />
<div id="loading-icon"><img src="/assets/img/logo/preloader.png" alt="" /></div>
</div>
</div>
export default function Preloader({ fadeOut }: { fadeOut?: boolean }) {
</> return (
) <div className={`preloader ${fadeOut ? 'fade-out' : ''}`}>
<div className="loading-container">
<div className="loading" />
<div id="loading-icon">
<img src="/assets/img/logo-tca.png" alt="Loading..." />
</div>
</div>
</div>
);
} }

37
components/common/ClientLayout.tsx Normal file
View File

@ -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 && <Preloader fadeOut={fadeOut} />}
{!isLoading && children}
</>
);
}

57
public/assets/scss/main.scss
View File

@ -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 "theme";
@forward "components"; @forward "components";
@forward "layout"; @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;
}