Full Page Pre loading

[hajpepe]

Summary

In this component, the loading indicator remains hidden until the website has fully loaded. I want to avoid using an artificial loading timer. The indicator should only disappear once the actual loading is complete. what i need to do ?
look how this loading work : https://kupro.vercel.app/

Additional information

"use client";

import { useState, useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import dynamic from "next/dynamic";
import Preloader from "@/components/msic/preloader";
import Pagination from "@/components/msic/pagination";

const Hero = dynamic(() => import("@/components/Home/hero"), { ssr: false });
const OurStory = dynamic(() => import("@/components/Home/ourstory"), { ssr: false });
const OurValue = dynamic(() => import("@/components/Home/ourvalue"), { ssr: false });
const OurTeam = dynamic(() => import("@/components/Home/ourteam"), { ssr: false });
const Office = dynamic(() => import("@/components/Home/office"), { ssr: false });
const Navbar = dynamic(() => import("@/components/navbar"), { ssr: false });

gsap.registerPlugin(ScrollToPlugin);

export default function Home() {
  const sections = ["Hero", "OurStory", "OurValue", "OurTeam", "Office"];
  const [currentSection, setCurrentSection] = useState("Hero");
  const [loading, setLoading] = useState(true);
   const [isMenuOpen, setIsMenuOpen] = useState(false); 
  const preloaderRef = useRef(null);
  const heroRef = useRef(null);
  const ourStoryRef = useRef(null);
  const ourValueRef = useRef(null);
  const ourTeamRef = useRef(null);
  const officeRef = useRef(null);
  const scrollingRef = useRef(false);
  const startYRef = useRef(0);

  const sectionRefs = {
    Hero: heroRef,
    OurStory: ourStoryRef,
    OurValue: ourValueRef,
    OurTeam: ourTeamRef,
    Office: officeRef,
  };

  const scrollToSection = (section, margin = 0) => {
    const sectionRef = sectionRefs[section];
    if (sectionRef && sectionRef.current) {
      const offsetTopWithMargin = sectionRef.current.offsetTop - margin;
      gsap.to(window, {
        scrollTo: { y: offsetTopWithMargin, autoKill: false },
        duration: 0.8,
        onComplete: () => (scrollingRef.current = false),
      });
    }
  };

  useEffect(() => {
    scrollToSection("Hero");
  }, []);

  useEffect(() => {
    setTimeout(() => setLoading(false), 1500);

    const handleWheelScroll = (event) => {
      if (scrollingRef.current) return;
      scrollingRef.current = true;
      const direction = event.deltaY > 0 ? "down" : "up";
      changeSection(direction);
    };

const handleTouchStart = (event) => {
  // Only track the starting position for reference, no snapping triggered.
  startYRef.current = event.touches[0].clientY;
};

const handleTouchEnd = (event) => {
  // Calculate the difference in touch movement but don't trigger snapping.
  const endY = event.changedTouches[0].clientY;
  const deltaY = endY - startYRef.current;

  // Update current section based on swipe direction, but do not scroll.
  if (Math.abs(deltaY) > 60) {
    const direction = deltaY < 0 ? "down" : "up";
    const currentIndex = sections.indexOf(currentSection);
    let nextIndex = currentIndex;

    if (direction === "down" && currentIndex < sections.length - 1) nextIndex++;
    else if (direction === "up" && currentIndex > 0) nextIndex--;

    if (nextIndex !== currentIndex) {
      const nextSection = sections[nextIndex];
      setCurrentSection(nextSection);
    }
  }
};

    const handleKeyScroll = (event) => {
      if (scrollingRef.current) return;
      scrollingRef.current = true;

      switch (event.key) {
        case "ArrowDown":
        case " ":
          changeSection("down");
          break;
        case "ArrowUp":
          changeSection("up");
          break;
        default:
          scrollingRef.current = false;
          break;
      }
    };

    const changeSection = (direction) => {
      const currentIndex = sections.indexOf(currentSection);
      let nextIndex = currentIndex;

      if (direction === "down" && currentIndex < sections.length - 1) nextIndex++;
      else if (direction === "up" && currentIndex > 0) nextIndex--;

      if (nextIndex !== currentIndex) {
        const nextSection = sections[nextIndex];
        const isPhone = window.innerWidth < 790;

        // Adjust margins based on section names and screen size
        let margin = 0;
        switch (nextSection) {
          case "OurStory":
            margin = isPhone ? 80 : 20;
            break;
          case "OurValue":
            margin = isPhone ? 80 : 20;
            break;
          case "OurTeam":
            margin = isPhone ? 80 : 80;
            break;
          case "Office":
            margin = isPhone ? 0 : 20;
            break;
          default:
            margin = 0;
            break;
        }

        setCurrentSection(nextSection);
        scrollToSection(nextSection, margin);
      } else {
        scrollingRef.current = false;
      }
    };

    window.addEventListener("wheel", handleWheelScroll);
    window.addEventListener("touchstart", handleTouchStart, { passive: true });
    window.addEventListener("touchend", handleTouchEnd, { passive: true });
    window.addEventListener("keydown", handleKeyScroll);

    return () => {
      window.removeEventListener("wheel", handleWheelScroll);
      window.removeEventListener("touchstart", handleTouchStart);
      window.removeEventListener("touchend", handleTouchEnd);
      window.removeEventListener("keydown", handleKeyScroll);
    };
  }, [currentSection, sections]);

  const handleNavigation = (section) => {
    setCurrentSection(section);
    scrollToSection(section);
  };

  return (
    <div className="hero">
      <Navbar
        currentSection={currentSection}
        toggleMenu={() => setIsMenuOpen((prev) => !prev)}
      />

      <main className="container mx-auto flex min-h-screen">
        <div className="flex-1 relative">
          {loading && (
            <Preloader preloaderRef={preloaderRef} loading={loading} />
          )}

          <div
            ref={heroRef}
            style={{
              height: "100vh",
              visibility: loading ? "hidden" : "visible",
            }}
          >
            <Hero />
          </div>
          <section
            ref={ourStoryRef}
            style={{
              height: "100vh",
              marginTop: "20px",
              visibility: loading ? "hidden" : "visible",
              touchAction: "auto",
            }}
          >
            <OurStory />
          </section>
          <section
            ref={ourValueRef}
            style={{
              height: "100vh",
              visibility: loading ? "hidden" : "visible",
              touchAction: "auto",
            }}
          >
            <OurValue />
          </section>
          <section
            ref={ourTeamRef}
            style={{
              height: "100vh",
              visibility: loading ? "hidden" : "visible",
              touchAction: "auto",
            }}
          >
            <OurTeam />
          </section>
          <section
            ref={officeRef}
            style={{
              height: "100vh",
              visibility: loading ? "hidden" : "visible",
              touchAction: "auto",
            }}
          >
            <Office />
          </section>
        </div>

        {/* Right Container: Pagination - Desktop */}
        <div className="hidden lg:block flex-0 relative">
          <div className="sticky top-[45%] p-4">
            <Pagination
              sections={sections}
              currentSection={currentSection}
              handleNavigation={handleNavigation}
            />
          </div>
        </div>
      </main>

      {/* Bottom Container: Pagination - Mobile */}
      {!isMenuOpen && currentSection !== "Hero" && (
        <div className="block lg:hidden fixed bottom-0 left-0 right-0 p-4 justify-center items-center bg-white shadow-md z-30">
          <Pagination
            sections={sections}
            currentSection={currentSection}
            handleNavigation={handleNavigation}
          />
        </div>
      )}
    </div>
  );
}

Example

No response

[Icegreeen]

I believe the best approach to ensuring that the loading indicator remains visible until the site is fully loaded is to base it on detecting the loading event in the window object.

1 - Remove the charging timer from the charging state.

2 - Add an event handler for the window object's loading event.

3 - Inside the event handler, set the loading state to false to indicate that loading is complete and the loading indicator can be removed.

Something like:

 useEffect(() => {
    window.addEventListener("load", handleLoad);

    return () => {
      window.removeEventListener("load", handleLoad);
    };
  }, []);

  const handleLoad = () => {
    setLoading(false);
  };