During the navigation to Next 13, I want to display a loading indicator on my screen to inform the user about the ongoing navigation process.
I attempted to implement this using the traditional method, but I encountered difficulties as I cannot utilize next/router in a Client Component.
1. Begin by creating a new file named Loader.js within your components folder.
2. Inside Loader.js, insert the code snippet below:
import { useEffect, useState } from 'react';
const Loader = () => {
const [loading, setLoading] = useState(false);
useEffect(() => {
const handleStart = () => setLoading(true);
const handleComplete = () => setLoading(false);
Router.events.on('routeChangeStart', handleStart);
Router.events.on('routeChangeComplete', handleComplete);
Router.events.on('routeChangeError', handleComplete);
return () => {
Router.events.off('routeChangeStart', handleStart);
Router.events.off('routeChangeComplete', handleComplete);
Router.events.off('routeChangeError', handleComplete);
};
}, []);
return loading ? <div>Loading...</div> : null;
};
export default Loader;
3. Within your main layout component (for example, Layout.js), import and utilize the Loader component:
import Loader from './Loader';
const Layout = ({ children }) => {
return (
<div>
<Loader />
{children}
</div>
);
};
export default Layout;
4. Surround your pages or components that need the loading indicator with the Layout component:
import Layout from '../components/Layout';
const HomePage = () => {
return (
<Layout>
{/* Your page content */}
</Layout>
);
};
export default HomePage;
TS Playground of the problem function callStringFunction(callback: (s: string) => void) { callback("unknown string inputted by user"); } function callNumberFunction(callback: (n: number) => void) { callback(4); // unknown number inputt ...
Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...
Encountering a common issue: The header needs to display "register" for guests and "profile" for users. The header resides in the root layout file while the user's status is stored in a cookie. In a client component, I extract the cookie content and ...
How do I access the service variable in my routing file? I created a UserService with a variable named user and I need to use that variable in my routing file. Here is the approach I tried, but it didn't work: In the routing file, I attempted: cons ...
I encountered a situation where I needed to make sequential API calls using RxJs in Angular. However, despite successfully implementing the calls, I am struggling with a null error. In this scenario, the second API call depends on receiving an id from the ...
I've been struggling with slow hot reloading times in my Next.js 14 project that incorporates TailwindCSS, Shadcn, and React Icons. Below is a comprehensive list of all the packages I have installed: radix-ui/<a href="/cdn-cgi/l/email-protection" c ...
I'm currently in the process of building a website using Next.js and I want to upload a file to OneDrive using the Microsoft Graph REST API. The documentation states that the request body should be the binary stream of the file you wish to upload, bu ...
I've encountered an issue with my Next.js app where I set up an endpoint to handle webhooks from a third-party payment application. The logic in the code for this endpoint is straightforward - it verifies that the order has been paid and then updates ...
When trying to retrieve data from the nextjs server on the front end, there is an issue with the code following the fetch() function inside the onSubmit() function. Check out the /test page for more details. pages/test const onSubmit = (data) => { ...
When working with Angular2, I encountered an error in Visual Studio Code that is displayed with the following message: enter image description here Here is the content of my tsconfig.json file: { "compilerOptions": { "target": "es5", "module" ...
Hey there, fellow Next/React enthusiasts! I'm new to the exciting world of Next.js and React, and currently delving into replicating a cool custom theme feature I stumbled upon in a tutorial video here (specifically from minutes 2:33 to 5:00). In my ...
Can Bull (used for job management) be implemented without utilizing Redis? Here is a segment of my code: @Injectable() export class MailService { private queue: Bull.Queue; private readonly queueName = 'mail'; constructor() { ...
I am new to learning GraphQL with Typescript and I am trying to pass an argument in a GraphQL function to return something dynamically. I have been struggling with this issue for the past hour and could not find any solutions. Here are the relevant code sn ...
Looking for a way to attach types to record names in a class that returns a Record. The current code snippet is as follows: interface DataInterface { bar: number; foo: string; fooBar: boolean; } export class MyClass { public bar: number; p ...
When using Next.js, I make an API call like this: const response = await fetch('/api/generateimageHG2'); This triggers the following function: import { HfInference } from "@huggingface/inference"; export default async function genera ...
The challenge Imagine creating an Angular service that needs to expose an Observable<number[]> to consumers: numbers: Observable<number[]>; Our requirements are: Receive the latest value upon subscription Receive the entire array every tim ...
Within my typings file, I have the following: declare namespace Somatic { enum PropType { html, object, css } } In a separate file named index.ts, I create a shorter alias for this enum like so: type PropType = Somatic.Pr ...
I have a TypeScript-coded Express server with three files for keys in the compiled and pre-compiled code: /// dev.ts - development keys const keys = { googleClientSecret: "GOOGLE_KEY", mongoURI: "mongodb+srv://MONGO_K ...
In TypeScript 3.7, a new feature allows the writing of "assertion functions." One example is shown below: export type TOfferAttrName = keyof typeof offerAttrMap; export const assertIsOfferAttrName = (name: string): asserts name is TOfferAttrName => { ...
On my hero section, I have implemented some animations using framer.motion that I only want to display on the initial load. To achieve this, I attempted to use useState and useEffect along with local storage to keep track of whether or not the animations ...