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/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 (
<html lang="en">
<body className={`${figtree.variable} ${grotesk.variable}`}>{children}</body>
</html>
)
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${figtree.variable} ${grotesk.variable}`}>
<ClientLayout>{children}</ClientLayout>
</body>
</html>
);
}

24
app/loading.tsx
View File

@ -1,14 +1,14 @@
export default function Preloader() {
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>
import React from 'react';
</>
)
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 "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;
}