Add Loader During Page Navigation

[harish08102004]

Description Add a global loading spinner that appears when navigating between pages in the Next.js app. This will enhance the user experience by providing feedback during page transitions, especially when there is a delay in loading the new page or fetching data.

Current Behavior Currently, there is no visual indication of loading when navigating between pages in the Next.js app, which can lead to confusion, especially on slower connections or when pages involve data fetching.

Expected Behavior

• A loading spinner should be displayed whenever a user navigates between pages.
• The spinner should be globally present and disappear once the new page is fully loaded.
• The loading spinner should be placed in a reusable component and easily customizable.

Requirements

Global Loading State:

• Use next/router's router.events to detect when navigation starts and ends.
• Track the loading state using React's useState and useEffect hooks in a central location like _app.tsx.

Loader Component:

• Create a Loader.tsx component that displays a spinner (or another loading animation).
• Optionally, include a message like "Please wait..." alongside the spinner.
• Ensure this component is well-typed using TypeScript and handles optional props (like message).

Page Navigation Tracking:

• Use router.events.on('routeChangeStart') and router.events.on('routeChangeComplete') to detect when navigation starts and ends.
• Trigger the loading state during these events.

Styling:

• Style the loader with a centered spinner and a background overlay that slightly dims the page to indicate it's loading.
• Ensure the loader is responsive and looks good on all devices.

Accessibility:

• Add ARIA attributes to ensure the loader is accessible, especially for screen readers.

Performance Considerations:

• Ensure the loader does not add unnecessary overhead or block rendering.
• Use Next.js optimally to prefetch data when necessary to reduce loading times.

[avishek999]

assign me this task

[avishek999]

also this issue to be fixed under hackOctoberFest and GSSOC-Extd label under any Level

[Rakshit-gen]

Assigned to both of you @avishek999 and @harish08102004 Work on it and update me!

[avishek999]

@Rakshit-gen can you please specify at what pages do you need the loader and do i need add my own creds in .env??

[Rakshit-gen]

On every page wherever you find it necessary @avishek999 And yes you have to create your own .env file

[Rakshit-gen]

@avishek999 any updates?