[#3 ] Delay loading bar

Fix broken PC UI on iOS
Remove name from layout due to no longer being built at runtime
2025-05-04 22:53:32 -04:00 · 2025-05-02 22:44:35 -04:00 · 2025-05-02 17:09:43 -04:00
4 changed files with 111 additions and 44 deletions
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import config from "../../public/config/config.json";

 const inter = Inter({
  variable: "--font-inter",
@@ -9,10 +8,7 @@ const inter = Inter({
  preload: true,
 });

-export const metadata: Metadata = {
-  title: config.name.join(" "),
-  description: "Portfolio",
-};
+export const metadata: Metadata = { title: "Portfolio" };

 export default function RootLayout({
  children,
@@ -8,7 +8,6 @@ import {
  Text,
  Html,
  type PerspectiveCameraProps,
-  useProgress,
 } from "@react-three/drei";
 import {
  animated as threeAnimated,
@@ -45,6 +44,7 @@ import { Credits } from "../ui/Credits";
 import { isWebGL2Available } from "@react-three/drei";
 import { useWindowSize } from "../hooks/useWindowSize";
 import { Info } from "../util/Info";
+import { Loader } from "../ui/Loader";

 const AnimatedCam = threeAnimated(PerspectiveCamera);
 const AnimatedButton = webAnimated.button as React.ComponentType<
@@ -75,7 +75,6 @@ function FpsUpdater({

 export function Scene(props: JSX.IntrinsicElements["group"]) {
  const { nodes, materials } = useGLTF("/scene.glb") as unknown as GLTFResult;
-  const { progress } = useProgress();
  const { width, height } = useWindowSize();
  const config = useConfig();

@@ -148,6 +147,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
  // Scene
  return (
    <main className="h-screen w-screen overscroll-none touch-none bg-[#1b1b1b]">
+      <Loader />
      {isWebGL2Available() ? (
        width >= 1.5 * height ? (
          <>
@@ -178,30 +178,14 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
              </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">
                <Info />
-                {isNaN(fps) ? "-" : fps.toFixed(0)} fps
+                {fps > 0 && <>{fps.toFixed(0)} fps</>}
              </div>
            </div>
            <Canvas
              shadows
              gl={{ localClippingEnabled: true, antialias: true, alpha: true }}
            >
-              <Suspense
-                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>
-                }
-              >
+              <Suspense fallback={null}>
                <group {...props} dispose={null}>
                  <FpsUpdater onUpdate={setFps} />
                  <Environment preset="apartment" />
@@ -244,7 +228,7 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                          currentView === View.PCView ? "auto" : "none"
                        }
                        occlude="blending"
-                        className="w-[1452px] h-[810px] bg-neutral-400"
+                        className="w-[1452px] h-[810px] bg-[#0e1838]"
                        scale={10}
                        position={[0, 170, 0.25]}
                        raycast={
@@ -253,12 +237,8 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                            : undefined
                        }
                        distanceFactor={10}
-                        style={{
-                          backgroundImage: "url(/assets/pc-bg.webp)",
-                          backgroundColor: "#111535",
-                        }}
                      >
-                        <div className="w-full h-full backdrop-blur-md">
+                        <div className="size-full">
                          <PCUI />
                        </div>
                      </Html>
@@ -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
+  );
+};
@@ -308,11 +308,11 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
        <div className="flex h-full space-x-1">
          <Icon
            path={mdiFolder}
-            className="text-neutral-400 h-full w-fit rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
+            className="text-neutral-400 size-8 rounded-tl-lg rounded-br-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
          />
          <Icon
            path={mdiPin}
-            className="text-neutral-400 h-full w-fit rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
+            className="text-neutral-400 size-8 rounded-b-lg transition-all hover:bg-blue-800 hover:ring-blue-500 hover:ring-1 p-1.5"
          />
        </div>
        <p className="absolute left-1/2 transform -translate-x-1/2 text-white">
@@ -321,21 +321,21 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
        <div className="flex h-full space-x-1 ml-auto justify-end">
          <Icon
            path={mdiWindowMinimize}
-            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-amber-800 hover:ring-amber-500 hover:ring-1 p-1.5"
          />
          <Icon
            path={mdiWindowRestore}
-            className="text-neutral-100 h-full w-fit rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-b-lg transition-all hover:bg-green-800 hover:ring-green-500 hover:ring-1 p-1.5"
          />
          <Icon
            path={mdiWindowClose}
-            className="text-neutral-100 h-full w-fit rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
+            className="text-neutral-100 size-8 rounded-tr-lg rounded-bl-lg transition-all hover:bg-red-800 hover:ring-red-500 hover:ring-1 p-1.5"
          />
        </div>
      </div>
      <div className="flex bg-neutral-950 size-full rounded-b-lg text-white">
        <div className="h-full w-fit bg-neutral-950 flex flex-col rounded-bl-lg">
-          <div className="h-14 p-2 pr-1 flex justify-center w-fit space-x-1">
+          <div className="h-14 p-2 pr-1 flex justify-center w-36 space-x-1">
            <Icon
              path={mdiArrowLeft}
              className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -402,7 +402,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
              >
                <Icon
                  path={mdiHelp}
-                  className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
+                  className="text-neutral-100 size-11 rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
                />
              </button>
            </div>
@@ -417,7 +417,7 @@ const Window: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
                defaultValue="/home/ahmed/Desktop/projects"
              />
            </div>
-            <div className="flex justify-center h-full w-fit space-x-1">
+            <div className="flex justify-center h-full w-36 space-x-1">
              <Icon
                path={mdiBackspace}
                className="text-neutral-100 h-full w-fit rounded-md transition-all hover:ring-neutral-500 hover:ring-1 p-2"
@@ -446,7 +446,7 @@ const Taskbar = () => {
        <div className="flex space-x-4 h-full w-fit items-center">
          <SiArchlinux
            color={SiArchlinuxHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
          />
          <div className="w-8 h-full">
            <div className="w-full h-1/2 bg-blue-900 outline-1 outline-blue-600 transition-all hover:bg-blue-700 hover:outline-blue-400" />
@@ -454,19 +454,19 @@ const Taskbar = () => {
          </div>
          <Icon
            path={mdiFolder}
-            className="text-blue-500 h-full w-fit transition-transform hover:scale-110 border-b-2"
+            className="text-blue-500 size-10 transition-transform hover:scale-110 border-b-2"
          />
          <SiVscodium
            color={SiVscodiumHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
          />
          <Icon
            path={mdiConsole}
-            className="text-neutral-400 h-full w-fit transition-transform hover:scale-110"
+            className="text-neutral-400 size-10 transition-transform hover:scale-110"
          />
          <SiFirefoxbrowser
            color={SiFirefoxbrowserHex}
-            className="h-full w-fit transition-transform hover:scale-110"
+            className="size-10 transition-transform hover:scale-110"
          />
        </div>
        <div className="flex space-x-2 h-full w-fit items-center">
Author	SHA1	Message	Date
ahmed	25e55272d9	[#3 ] Delay loading bar Publish Docker Image / Publish Docker Image (push) Successful in 5s Details	2025-05-04 22:53:32 -04:00
ahmed	2a1258a820	Fix broken PC UI on iOS Publish Docker Image / Publish Docker Image (push) Successful in 5s Details	2025-05-02 22:44:35 -04:00
ahmed	01ac4d61cf	Remove name from layout due to no longer being built at runtime Publish Docker Image / Publish Docker Image (push) Successful in 5s Details	2025-05-02 17:09:43 -04:00