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.

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

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

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)})

Please don't open duplicate threads for the same issue/question.