Next.js Discord

Discord Forum

Page loading screen

Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Open in Discord
Cuvier’s Dwarf CaimanOP
i can't get the loading.tsx to work for some reason. I had the defined it in the root app dir in the same folder as the root layout.tsx file, but I am not seeing the loading screen when I refresh my localhost server.

31 Replies

Cuvier’s Dwarf CaimanOP
So now I am trying to use a suspense boundry inside of the root layout file like so 
import "./globals.css";
import type { Metadata } from "next";
import "@mantine/core/styles.css";
import "@mantine/carousel/styles.css";
import { MantineProvider, ColorSchemeScript } from "@mantine/core";
import { Inter } from "next/font/google";
import BeeCursorFollowerComponent from "@/components/bee-cursor-follower.component";
import AosInitWrapperComponent from "@/components/aos-init-wrapper.component";
import TanstackQueryWrapperComponent from "@/components/queries-wrapper.component";
import NextAuthSessionWrapperComponent from "@/components/next-auth-session-wrapper.component";
import { Suspense } from "react";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Bijles SR",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" style={{ scrollBehavior: "smooth", overflowX: "hidden" }}>
      <head>
        <ColorSchemeScript />
      </head>
      <body className={`${inter.className}`}>
        <MantineProvider>
          <Suspense fallback={<p>Loading feed...</p>}>
            <main className="flex min-h-screen flex-col mx-auto items-center">
              <NextAuthSessionWrapperComponent>
                <AosInitWrapperComponent>
                  <TanstackQueryWrapperComponent>
                    <BeeCursorFollowerComponent>
                      {children}
                    </BeeCursorFollowerComponent>
                  </TanstackQueryWrapperComponent>
                </AosInitWrapperComponent>
              </NextAuthSessionWrapperComponent>
            </main>
          </Suspense>
        </MantineProvider>
      </body>
    </html>
  );
}
This also does not work.
I want to achieve a page load state similar to the one on this [example site](https://bracketweb.com/eduact-html/index-one-page.html). And currently I have [this](https://bijles-sr.vercel.app/). As you can see, the images and initial page animations take a while to load/execute.
Cuvier’s Dwarf CaimanOP
bump 🆘
Cuvier’s Dwarf CaimanOP
bump 🆘
Cuvier’s Dwarf CaimanOP
Bump 🫠
Toyger
it's now how suspense works you can read here how you can workaround it https://github.com/vercel/next.js/discussions/50617#discussioncomment-6058254
Cuvier’s Dwarf CaimanOP
In my case I want to load a whole page
@Cuvier’s Dwarf Caiman In my case I want to load a whole page
Toyger
whole page it's html/js/css+images
html loads first css/js will load faster than images
so your only problem is images.
Cuvier’s Dwarf CaimanOP
ok,
Have you visited the site i'm working on?
There's a big round image carousel
and image blobs when you scroll down.
Kinda doesn't make sense to adding loading skeletons for those blobs images imo.
and for the moving +, =, x, - icons
Toyger
probably, as I understood your main problem is carousel images.
Cuvier’s Dwarf CaimanOP
and the rest of them are also images
I don't use framer-motion to animate the % Icon so that's why it's just there initially
then it starts animating after the rest has loaded in.
Cuvier’s Dwarf CaimanOP
So because of that reason I want to set a loading state for the whole page
@Cuvier’s Dwarf Caiman So because of that reason I want to set a loading state for the whole page
Toyger
you already have suspense, more likely you just need to put there this asyncimage from link I gave you.
@Toyger you already have suspense, more likely you just need to put there this asyncimage from link I gave you.
Cuvier’s Dwarf CaimanOP
so I need to turn all images into async components?
For most of the images I use motion.img
motion is imported from framer-motion.
How do I work around that then.
@Cuvier’s Dwarf Caiman so I need to turn all images into async components?
Toyger
yeah to the one that provided in link, but there is probably different problem I am not sure <suspense> will wait for components that deep in component tree, but you need to test it anyway.
if it will not work then you'll better to get rid of suspense and make some custom loader that will wait for images.
also you can try to add image priority
@Cuvier’s Dwarf Caiman For most of the images I use `motion.img`
Toyger
can you provide some code
Cuvier’s Dwarf CaimanOP
[Hero Component](https://github.com/Beefy-py/bijles-sr/blob/dev/src/components/hero.component.tsx)
You can see in here for example: 
        {/* Carousel for larger screens */}
        <div className="hidden lg:flex -mt-24 lg:-mt-0 h-full p-6 col-span-full lg:col-span-6 items-center justify-center relative">
          <motion.div
            className="box absolute right-10 bottom-40 z-[2] w-16 h-16 opacity-70"
            animate={{ scale: [1, 1.1, 1], x: [0, 15, 0] }}
            transition={{
              repeat: Infinity,
              type: "tween",
              duration: 4,
              delay: 0.5,
            }}
          >
            <Image
              src={"/images/equal-sign.png"}
              alt="plus symbol image"
              width={30}
              height={30}
            />{" "}
          </motion.div>{" "}
          <div className="box absolute right-32 -bottom-32 z-[2] w-24 h-24 opacity-70">
            <motion.img
              animate={{ rotate: [0, 45, 0] }}
              transition={{
                repeat: Infinity,
                type: "tween",
                duration: 1.5,
                delay: 0.5,
              }}
              src={"/images/plus-math.png"}
              alt="plus symbol image"
              width={80}
              height={80}
            />{" "}
          </div>
          <Carousel
            loop
            plugins={[autoplay.current]}
            className="hero-slider"
            styles={{
              viewport: {
                borderRadius: "50%",
                maxWidth: "1000px",
              },
            }}
            withControls={false}
          >
            {heroComponent.imageSlider.map((img, index) => (
              <Carousel.Slide key={index + img.title}>
                <Image
                  radius="lg"
                  w="auto"
                  fit="contain"
                  src={img.src}
                  alt={img.title}
                />
              </Carousel.Slide>
            ))}
          </Carousel>
for the equals symbol I nested a next/image component inside of motion.div
but it should be motion.img as well just like for the plus icon
Toyger
firstly try to add priority https://nextjs.org/docs/pages/building-your-application/optimizing/images#priority
if it not help try to replace Image with AsyncImage from previous link
if it also will not help try to remove motion blocks and check will loading.js work without it.
Cuvier’s Dwarf CaimanOP
alr