Questions tagged [react-suspense]
194 questions
0
votes
0 answers
nextjs13.4 @folder/loading.js not functioning correctly
I am trying to familiarize myself with NEXTJS 13.4
I have this app directory on a local project
App dir Screenshot
and I have this code on app/platform/layout.tsx
"use client";
import { CactusLayout, CactusSection } from…
0
votes
0 answers
Rendering a loading state in a NextJS app
I am trying to render some stats on the landing page of the app I am working on and I want to use a skeleton as a placeholder for the numbers whilst they are fetched from the database.
This is the hierarchy:
{...}
0
votes
1 answer
Next.js fetch with Suspense
According to the docs, this is a typical fetch with Suspense pattern (a bit simplified).-
import { getArtist, getArtistAlbums, type Album } from './api';
export default async function Page({
params: { username },
}: {
params: { username:…
ssantos
- 16,001
- 7
- 50
- 70
0
votes
0 answers
How to call parent's api before chidren's api in react?
Basically If I have react components like
function ParentComponent(){
useEffect(() => {
parentApi();
},[])
return <>Parent Component
}
function ChildComponent (){
…
0
votes
0 answers
How to combine Suspense and dynamic import in json?
I want to dynamically import a json and have searched for some websites and written down this. However, as the picture depicts, it is stuck in infinite loop. There is lot of info about React.lazy but this is not a component. How should I do this?…
SNORLAX
- 135
- 8
0
votes
1 answer
How to get rid of AxiosError message in React?
To check the behavior of ErrorBoundary, I used axios to send an api get request with the path parameter intentionally missing.
const Container = () => {
return (
…
Jake
- 1
0
votes
2 answers
React Suspense does not load stylesheet
I have the following code.
desh
- 627
- 1
- 7
- 19
0
votes
1 answer
Lazy Loading in React - improves first page load, but makes all other page loads less smooth because of subsequent loads
In our React application's App.js file, lazy loading components that are not needed on the initial page load definitely helps with the speed of our first page load. However, it also seems to have a negative impact on the rest of the website's…
Canovice
- 9,012
- 22
- 93
- 211
0
votes
1 answer
Empty data displayed before data is loaded - React Suspense
I implement Suspense from React in my app.
I have this code in the Page :
const Articles = React.lazy(() => import("./../components/Articles/Articles"));
...
Johan
- 2,088
- 2
- 9
- 37
0
votes
0 answers
Use a button to retry loading a code split webpack chunk that failed to load
In javascript, code splitting can make bundle sizes smaller. But, if the network is flaky, then resources may fail to load, producing an error like ChunkLoadError: Loading chunk 2361 failed. (error:…
Colin D
- 2,822
- 1
- 31
- 38
0
votes
0 answers
Next.js 13: loading.js not working when put in SSR folders
I've built a Next.JS app that has SSR user profiles and blog articles.
I'm having trouble getting the new Loading UI/loading.js from Next.js 13 to work.
File Structure
pages
├── profiles
│ └── [title].js
│ └── loading.js
│
│
├──…
filmsaremyalc
- 17
- 1
- 6
0
votes
1 answer
How does React's useTransition avoid showing loading components?
In the docs: https://beta.reactjs.org/reference/react/useTransition#preventing-unwanted-loading-indicators
There's an example of a tab component that only shows up when it has finished loading all its data. Before it's finished, we still see the…
Plumpie
- 426
- 1
- 6
- 22
0
votes
0 answers
How to keep a React component running in the background for report generation while navigating to other screens?
I am generating a report for multiple datasets by overlaying WMS images from GeoServer as a slideshow and taking screenshots using the html2canvas library.
The problem is that if the user navigates to another component or screen, then the slideshow…
Abhilash
- 43
- 1
- 8
0
votes
0 answers
Efficient use of suspense
I'm working on refactoring existing logic into suspense.
These days, I use suspense, but there are many times when I have questions.
const Duplicate = ({ children }) => {
return {children}
};
const Component = () => {
const {…
Sh031224
- 769
- 1
- 7
- 20
0
votes
0 answers
Cannot find module or its corresponding type declaration when React.lazy import from a url
I create a Vite React project with yarn create vite.
When I try to import a async component from local server,
VSCode show errors but vite compiled the code without errors.
How to stop VSCode from keep reporting the error?
aztack
- 4,376
- 5
- 32
- 50