Next.js 14 Tutorial - 23 - Loading UI

📱 Follow Codevolution

Loading UI

[santanu]

I got scared thinking you stopped this series. Welcome back

[n_ah]

Dill se Thankyou, for continue this series.. ❤

[sayedaliaqamousavi]

I was waiting impatiently for new episodes. Thanks sir

[abbashaidari]

I just love you bro!! Your tutorials are clear and to the point and always a major LIFESAVER! I'm broke as fuck but I'm gonna try my best to show a little love.

[antivirus]

*Please make a video tutorial on how to use Redux/Toolkit with Next.js 14*

[soumyakhatri]

Thank you so much for uploading the tutorial.

[sinaanvarinia]

thanks again for your wonderful series

[dhavalvanjara]

Finally welcome back. Please don't go in pause mode again. 🙏

[santanu]

Thank you for the tutorial. This channel has helped me a lot.
I would like to ask you something. Please make a video on how to overcome tutorial hell and become a better developer. Somehow I have learned a lot but am not able to implement anything. This would be really helpful to me.

[TaifAhamd-gczz]

You took a pretty long break before this episode. I hope everything is well with you.

[aliblackeye_dev]

So, how can I ensure that layout elements such as header and footer are not rendered during loading?

[ranaimranahmed]

Welcome back sir love from pakistan 🇵🇰

[ArunkumarKamaraj-hq]

explain app router vs page router with serverside components and ssr, ssg

[adarshdalvi]

hey I have a question, for server components, its easy for server to know if the requested page has loaded or not, lets say for /login page, the initial page only contains a form, so its easy for server to know if its rendered or not. but for a client component, how does this work? let say I have this chats client component page, and my chats are loading, so how does next js determines the amount of time to show a loading design?

[duykhanhnguyen]

does loading.tsx affect with "use client" component?

[mernik]

I'm facing an issue, if I put a loading.tsx file in a route like /dashboard, the loading skeleton is also visible in routes such as dashboard/settings whereas it was only meant to be shown ain /dashboard. I searched around a bit and it seems others have faced a similar issue but have nowhere found a workaround for that

[VivekSpecscart]

how to hide global components on specific page in next js?

[theangelofspace]

I was worried that the serie was not being updated

[МИРНЫЙ]

Kind people, help please. I've been in deep despair for 3 days trying to solve the problem. And I haven't resolved yet :( I've created a very simple stuff for trying. When I'm reloading page, i don't see loading animation. When I'm jumping to that page from another one, at first I wait 3 seconds and then I see the page without loading. Why? Who knows?

next js 15.1.3
react 19.0.0

That's my page.jsx

import { Suspense } from "react";
import Delay from "./delay";

export default function AboutPage() {
return (
<div>
About
<Suspense fallback={<div>Loading Delay...</div>}>
<Delay />
</Suspense>
</div>
);
}

That's my Delay.jsx

import React from "react";

const Delay = async () => {
await new Promise((resolve) => setTimeout(resolve, 3000));
return <div>Delay: 3 seconds</div>;
};

export default Delay;

I've tried many ways: react lazily, create a new project using next 13, loading.jsx in the app. Nothing is working. Before I see the page, I gotta wait for the time by which I delay the execution of any "fetch" function.

[vendetta]

what signifies a loading or a non-loading state?