how are you handling your loading screen stuff in your code? btw you have an awesome UI

I just created a loading.jsx file in the app folder.

do you have any async operation in your page.tsx? I mean your main landing page?
loading.jsx is most effective when there are async operations in your page component or its children, such as data fetching or lazy-loaded components

but ofc you can still use loading.jsx for instant navigation with loading UI

I have a front-end website with React Three Fiber on the main landing page. The React Three Fiber code is wrapped in a suspense.

aha, it was - can you show me the page.tsx codebase if it's allowed?

hmm I would like to recommend you to get your React Three Fiber component out of Suspense - then you will see your loading UI longer than before until Threejs has been loaded completely

What exactly should I show?

page.tsx

I only have this on my page.jsx

import Main from "./Main/Main";

export default function Home() {
return (
<Main />
);
}

omg, why is this needed? then show me Main

It's easier to have everything organized like that. Should I do it differently?

const Main = () => {

return (
<ReactLenis root>
<SectionHero />
<div className="normal-padding" />
<SectionShowreel />
<div className="border-padding">
<div className="section-border"></div>
</div>
<SectionServices />
<div className="normal-padding" />
<SectionProjects />
<div className="normal-padding" />
<SectionTechstack />
<div className="normal-padding" />
<SectionTestimonials />
<div className="normal-padding" />
<SectionKPI />
<div className="normal-padding" />
<SectionFlower />
<div className="normal-padding" />
<SectionFooter />
</ReactLenis>
);
};

export default Main;

so <SectionHero /> must be where you have ReactThreeFiber component right?

show me how you load it and do suspense

unless this <Main /> is used in other place, no need to do this way

Yes, exactly

oh man I also said "show me"

Wait a second

import React, { Suspense, useEffect, useLayoutEffect, useRef, useState } from "react";
import gsap from "gsap";
import SplitText from "gsap/src/SplitText";
import ScrollTrigger from "gsap/ScrollTrigger";
import Marquee from "react-fast-marquee";
import { ArrowUpRight } from "lucide-react";
import { Canvas } from "@react-three/fiber";
import { Environment, Float, OrbitControls } from "@react-three/drei";
import Image from "next/image";
import { Item3 } from "./HeroModel/Coins";

gsap.registerPlugin(SplitText, ScrollTrigger);

export const SectionHero = () => {

return (
<section className="hero">
<div className="hero-content">
<div className="hero-content-row">
<div className="hero-content-left"></div>
<div className="hero-content-right" >
<Canvas style={{ pointerEvents: 'auto', width: "100%", height: "100%", position: "absolute", top: 0, left: 0, zIndex: 1, }} camera={{ position: [ 2, 0, 10], fov: 35 }}>
<Float rotationIntensity={0.5} floatIntensity={2} speed={2}>
<Suspense fallback >
<Item3 />
</Suspense>
</Float>
<Environment preset="sunset" />
<OrbitControls maxPolarAngle={Math.PI / 2} enableZoom={false} enableRotate={true} enablePan={false} />
</Canvas>
</div>
</div>
<div className="hero-content-bottom">

</div></div>

</section>
);
};

try to remove <Suspense /> boundry in this component and see what you get on page load

I removed it and got the exact same result as I got with it