ahmed/portfolio-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

[#3] Delay loading bar
All checks were successful
Publish Docker Image / Publish Docker Image (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2025-05-04 22:53:32 -04:00
parent 2a1258a820
commit 25e55272d9
2 changed files with 95 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/scene/Scene.tsx
View File

@@ -8,7 +8,6 @@ import {
Text, Text,
Html, Html,
type PerspectiveCameraProps, type PerspectiveCameraProps,
useProgress,
} from "@react-three/drei"; } from "@react-three/drei";
import { import {
animated as threeAnimated, animated as threeAnimated,
@@ -45,6 +44,7 @@ import { Credits } from "../ui/Credits";
import { isWebGL2Available } from "@react-three/drei"; import { isWebGL2Available } from "@react-three/drei";
import { useWindowSize } from "../hooks/useWindowSize"; import { useWindowSize } from "../hooks/useWindowSize";
import { Info } from "../util/Info"; import { Info } from "../util/Info";
import { Loader } from "../ui/Loader";
const AnimatedCam = threeAnimated(PerspectiveCamera); const AnimatedCam = threeAnimated(PerspectiveCamera);
const AnimatedButton = webAnimated.button as React.ComponentType< const AnimatedButton = webAnimated.button as React.ComponentType<
@@ -75,7 +75,6 @@ function FpsUpdater({
export function Scene(props: JSX.IntrinsicElements["group"]) { export function Scene(props: JSX.IntrinsicElements["group"]) {
const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult; const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
const { progress } = useProgress();
const { width, height } = useWindowSize(); const { width, height } = useWindowSize();
const config = useConfig(); const config = useConfig();
@@ -148,6 +147,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
// Scene // Scene
return ( return (
<main className="h-screen w-screen overscroll-none touch-none bg-[#1b1b1b]"> <main className="h-screen w-screen overscroll-none touch-none bg-[#1b1b1b]">
<Loader />
{isWebGL2Available() ? ( {isWebGL2Available() ? (
width >= 1.5 * height ? ( width >= 1.5 * height ? (
<> <>
@@ -178,30 +178,14 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
</AnimatedButton> </AnimatedButton>
<div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm"> <div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm">
<Info /> <Info />
{isNaN(fps) ? "-" : fps.toFixed(0)} fps {fps > 0 && <>{fps.toFixed(0)} fps</>}
</div> </div>
</div> </div>
<Canvas <Canvas
shadows shadows
gl={{ localClippingEnabled: true, antialias: true, alpha: true }} gl={{ localClippingEnabled: true, antialias: true, alpha: true }}
> >
<Suspense <Suspense fallback={null}>
fallback={
<Html fullscreen>
<div className="pt-10 w-screen h-screen flex flex-col space-y-6 justify-center items-center text-white text-4xl pointer-events-none">
<p>Loading...</p>
<div className="w-48 bg-neutral-700 h-4 rounded-lg">
<div
className="h-full rounded-lg bg-neutral-100"
style={{
width: `${progress.toFixed(0)}%`,
}}
/>
</div>
</div>
</Html>
}
>
<group {...props} dispose={null}> <group {...props} dispose={null}>
<FpsUpdater onUpdate={setFps} /> <FpsUpdater onUpdate={setFps} />
<Environment preset="apartment" /> <Environment preset="apartment" />

91
src/components/ui/Loader.tsx Normal file
View File

@@ -0,0 +1,91 @@
"use client";
import { useProgress } from "@react-three/drei";
import { animated, useSpring, useTransition } from "@react-spring/web";
import { useEffect, useState, useRef } from "react";
import { createPortal } from "react-dom";
export const Loader = ({ minDuration = 750, fadeMs = 600 }) => {
const { progress } = useProgress();
const [loadedAt, setLoadedAt] = useState<number | null>(null);
const maxSeen = useRef(0);
if (progress > maxSeen.current) maxSeen.current = progress;
useEffect(() => {
if (maxSeen.current === 100 && loadedAt === null) setLoadedAt(Date.now());
}, [loadedAt]);
const visible =
loadedAt === null || Date.now() - loadedAt < minDuration + fadeMs;
const barSpring = useSpring({
from: { width: "0%" },
to: { width: "100%" },
config: { duration: minDuration },
});
const overlay = useTransition(visible, {
from: { opacity: 1 },
enter: { opacity: 1 },
leave: { opacity: 0 },
config: { duration: fadeMs, easing: (t) => Math.pow(t, 2) },
});
return createPortal(
overlay(
(styles, show) =>
show && (
// @ts-expect-error children not typed bug
<animated.div
style={{
...styles,
position: "fixed",
inset: 0,
background: "#1b1b1b",
zIndex: 999999999,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "1.5rem",
fontSize: "2.25rem",
color: "white",
pointerEvents: "none",
paddingTop: "2.5rem",
}}
>
<p>Loading…</p>
<div
style={{
width: 192,
height: 16,
background: "#4b4b4b",
borderRadius: 8,
overflow: "hidden",
}}
>
{/* @ts-expect-error children not typed bug */}
<animated.div
style={{
...barSpring,
height: "100%",
background: "#ffffff",
}}
>
{/* @ts-expect-error children not typed bug */}
<animated.div className="text-[#1b1b1b] text-xs justify-center flex items-center h-full">
{barSpring.width.to((w) => {
const p = parseInt(w) || 0;
return `${p > 5 ? p : ""}`;
})}
</animated.div>
</animated.div>
</div>
</animated.div>
)
),
document.body
);
};