uldp.edu.vn/app/components/common/Preloader.tsx

'use client';

import { useEffect, useState } from 'react';

const Preloader = () => {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        // Simulate loading time or wait for window load
        const handleLoad = () => {
            // Add a small delay to ensure assets are loaded or at least a smooth transition
            setTimeout(() => {
                setIsLoading(false);
            }, 500);
        };

        if (document.readyState === 'complete') {
            handleLoad();
        } else {
            window.addEventListener('load', handleLoad);
            // Fallback in case load event already fired or takes too long
            const timeoutId = setTimeout(handleLoad, 3000); 
            return () => {
                window.removeEventListener('load', handleLoad);
                clearTimeout(timeoutId);
            };
        }
    }, []);

    if (!isLoading) return null;

    return (
        <div id="preloader" className={`preloader ${!isLoading ? 'loaded' : ''}`} style={{ display: isLoading ? 'block' : 'none' }}>
            <div className="animation-preloader">
                <div className="spinner">                
                </div>
                <div className="txt-loading">
                    <span data-text-preloader="V" className="letters-loading">
                        V
                    </span>
                     <span data-text-preloader="I" className="letters-loading">
                        I
                    </span>
                     <span data-text-preloader="S" className="letters-loading">
                        S
                    </span>
                    <span data-text-preloader="A" className="letters-loading">
                        A
                    </span>
                    <span data-text-preloader="W" className="letters-loading">
                        W
                    </span>
                     <span data-text-preloader="A" className="letters-loading">
                        A
                    </span>
                     <span data-text-preloader="Y" className="letters-loading">
                        Y
                    </span>
                </div>
                <p className="text-center">Loading</p>
            </div>
            <div className="loader">
                <div className="row">
                    <div className="col-3 loader-section section-left">
                        <div className="bg"></div>
                    </div>
                    <div className="col-3 loader-section section-left">
                        <div className="bg"></div>
                    </div>
                    <div className="col-3 loader-section section-right">
                        <div className="bg"></div>
                    </div>
                    <div className="col-3 loader-section section-right">
                        <div className="bg"></div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Preloader;