NextJs preloader. | Next.js | Page 1

woeful stag Dec 3, 2024, 11:18 AM

#

What is the best approach to create a preloader in a website which hides when all the content of the website is loaded in nextJs app router?

deft ruinBOT Dec 3, 2024, 11:18 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

vivid lantern Dec 3, 2024, 11:20 AM

#

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Routing: Loading UI and Streaming | Next.js

Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.

woeful stag Dec 3, 2024, 12:06 PM

#

No, I want to create animations with framer motion when all the content of the website is loaded then hide the loader. The website will be static.

dense junco Dec 3, 2024, 12:22 PM

#

woeful stag No, I want to create animations with framer motion when all the content of the w...

yes so that is https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Routing: Loading UI and Streaming | Next.js

Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.

#

use this with loading.tsx at the very top level of your application

woeful stag Dec 3, 2024, 1:10 PM

#

Actually I have some animations I want that should wait until animation finishes. Does this work in useEffect in template.tsx
Window.addEventListner("load",()=>{setIsLoading(false)})

#NextJs preloader.