122 lines
4.7 KiB
TypeScript
122 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import Image from 'next/image';
|
|
|
|
const PRELOAD_VIDEOS = [
|
|
'/assets/videos/web/hero-bohrung.mp4'
|
|
];
|
|
|
|
export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
|
|
const [isLoading, setIsLoading] = useState(shouldShowLoader);
|
|
|
|
useEffect(() => {
|
|
if (!shouldShowLoader) return;
|
|
|
|
// Fallback Timeout (4 Sekunden), falls Videos hängen
|
|
const timeout = setTimeout(() => {
|
|
finishLoading();
|
|
}, 4000);
|
|
|
|
let videosLoaded = 0;
|
|
|
|
const checkAllLoaded = () => {
|
|
videosLoaded++;
|
|
if (videosLoaded === PRELOAD_VIDEOS.length) {
|
|
clearTimeout(timeout);
|
|
// Kleine Verzögerung für die smootheness
|
|
setTimeout(finishLoading, 800);
|
|
}
|
|
};
|
|
|
|
PRELOAD_VIDEOS.forEach((src) => {
|
|
const video = document.createElement('video');
|
|
video.preload = 'auto';
|
|
video.oncanplaythrough = checkAllLoaded;
|
|
video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
|
|
video.src = src;
|
|
video.load();
|
|
});
|
|
|
|
// Cleanup
|
|
return () => clearTimeout(timeout);
|
|
}, [shouldShowLoader]);
|
|
|
|
const finishLoading = () => {
|
|
// Set a session cookie so the server knows not to render the loader again
|
|
document.cookie = "etib_initial_loader_v5=true; path=/; samesite=lax";
|
|
setIsLoading(false);
|
|
};
|
|
|
|
// Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
|
|
if (!shouldShowLoader) return null;
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isLoading && (
|
|
<motion.div
|
|
key="initial-loader"
|
|
initial={{ y: 0 }}
|
|
exit={{ y: '-100%' }}
|
|
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
|
|
className="fixed inset-0 z-[9999] bg-[#050B14] flex flex-col items-center justify-center overflow-hidden"
|
|
>
|
|
{/* Subtle grid background */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
|
|
|
|
{/* Deep Glow */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
|
|
className="relative z-10 flex flex-col items-center w-full px-4"
|
|
>
|
|
{/* Logo Container with Shimmer / Reflection effect */}
|
|
<div className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 overflow-hidden mix-blend-plus-lighter">
|
|
<Image
|
|
src="/assets/logo-white.png"
|
|
alt="E-TIB Gruppe"
|
|
fill
|
|
className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
|
|
priority
|
|
/>
|
|
{/* Animated Light Sweep over Logo */}
|
|
<motion.div
|
|
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent skew-x-[-25deg]"
|
|
initial={{ left: '-150%' }}
|
|
animate={{ left: '250%' }}
|
|
transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }}
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Elegant Progress Bar */}
|
|
<div className="flex flex-col items-center w-full max-w-xs">
|
|
<div className="flex justify-between w-full mb-3 text-[10px] sm:text-xs font-mono text-white/40 tracking-[0.2em] uppercase">
|
|
<span>System</span>
|
|
<span className="text-primary/80 animate-pulse">Online</span>
|
|
</div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="h-[2px] w-full bg-white/5 overflow-hidden relative rounded-full"
|
|
>
|
|
<motion.div
|
|
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-dark via-primary to-primary-light"
|
|
initial={{ width: "0%" }}
|
|
animate={{ width: "100%" }}
|
|
transition={{ duration: 3.8, ease: [0.16, 1, 0.3, 1] }}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|