#with the new next/navigation this doesnt work:

1 messages · Page 1 of 1 (latest)

quaint juncoBOT
#

Hi @dawn saddle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js 13, the next/router package has been replaced with next/navigation. The useRouter hook is now imported from next/navigation instead of next/router. However, the next/navigation does not have the router.events API that was available in next/router.

To listen for page changes, you can use the usePathname and useSearchParams hooks from next/navigation and then use a useEffect that listens to changes in these values. Here's an example:

'use client'
 
import { useEffect, useState } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
const PageLoader = () => {
  const [loading, setLoading] = useState(false);
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    setLoading(true);
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // You can now use the current URL
    // ...
    setLoading(false);
  }, [pathname, searchParams])

  if (!loading) return null;

  return (
    <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 9999, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <p style={{ color: 'white' }}>Carregando...</p>
    </div>
  );
};

export default PageLoader;

This code will set the loading state to true whenever the page path or search parameters change, and then set it back to false after the new URL has been logged. This should give a similar effect to the routeChangeStart and routeChangeComplete events from next/router.

Please note that this is a basic example and might not cover all your needs. For more complex scenarios, you might need to implement additional logic.

#

@dawn saddle kapa.ai is still learning and improving, please let us know how it did by reacting below

dawn saddle
#

@quaint junco i want a loading thing as soon as the user clicks to navigate to other page, with your method is not really giving this effect

quaint juncoBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js 13, you can use the loading.js file convention to show an instant loading state from the server while the content of a route segment loads. This file affects all its child elements, including layouts and pages. It continues to display its contents until the data fetching process in the route segment completes.

Here's an example of a basic loading.js file:

export default function Loading() {
 return <p>Loading...</p>;
}

This Loading component will be displayed immediately when a navigation event occurs, giving the user instant feedback.

For more granular control, you can use the Suspense component from React. This allows you to display a fallback UI until components nested within it have finished loading. Here's an example:

import { Suspense } from 'react';
import { PostFeed, Weather } from './components';
 
export default function Posts() {
 return (
 <section>
 <Suspense fallback={<p>Loading feed...</p>}>
 <PostFeed />
 </Suspense>
 <Suspense fallback={<p>Loading weather...</p>}>
 <Weather />
 </Suspense>
 </section>
 );
}

In this example, a loading message is displayed for each section of the page until the data for that section has finished loading.

For more information, you can refer to the Next.js documentation on loading and Suspense (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming) and the Vercel documentation on Streaming with loading and Suspense (https://vercel.com/docs/frameworks/nextjs).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: