import NProgress from "nprogress" ; import nProgressStyles from "nprogress/nprogress.css" ; import { useEffect } from "react" ; import type { LinksFunction } from "remix" ; import { Links , LiveReload , Meta , Outlet , Scripts , ScrollRestoration , useTransition } from "remix" ; export const links = ( ) => { return [ { rel : "stylesheet" , href : nProgressStyles } ] ; } ; export default function App ( ) { const transition = useTransition ( ) ; useEffect ( ( ) => { if ( transition . state === "idle" ) NProgress . done ( ) ; else NProgress . start ( ) ; } , [ transition . state ] ) ; return ( < html lang = "en" > < head > < meta charSet = "utf-8" / > < meta name = "viewport" content = "width=device-width,initial-scale=1" / > < Meta /> < Links / > < /head> < body > < Outlet /> < ScrollRestoration / > < Scripts /> { process . env . NODE_ENV === "development" && < LiveReload />} < /body> < /html>); }