Questions tagged [react-suspense]
194 questions
0
votes
2 answers
How to type custom `preload` method for React.lazy components?
When trying to implement a preload() method for React.lazy() components, a typical pattern looks something like,
const ReactLazyPreload = (importStatement) => {
const Component = React.lazy(importStatement);
Component.preload = importStatement;…
aryzing
- 4,982
- 7
- 39
- 42
0
votes
0 answers
What are the 3 core issues in the React Suspense code snippet?
I participated in a trihackathon last week, and they gave us a code snippet asking what are the 3 errors in the code that violate principles of React Suspense. Can anyone figure it out?
import { Suspense, useState, useEffect } from 'react';
const…
john_challenge
- 9
- 1
0
votes
3 answers
react Suspense is not working and i don't know why
I was given a project to find out why the below lines of code isn't working.
The following code implement the React Suspense API,
but does so incorrectly. There are 3 core issues with how these components utilize Suspense and concurrent mode
which…
The Newbie
- 11
- 8
0
votes
1 answer
React-router-dom + Suspense : Problem in gh-pages deployment
I am working on a React app which uses react-router-dom for routing alongside React.lazy() and Suspense for code-splitting.
It is the same gh-pages giving 404 error problem everyone had and when I encountered it before this, adding the basename prop…
Suyash
- 1
- 1
0
votes
1 answer
Consistent fallback loading animation in nested components
I have a React version 17 app with a series of nested components. Each one uses the same component, which contains a CSS-animated spinner:
}>
MattSidor
- 2,599
- 4
- 21
- 32
0
votes
1 answer
Suspend UI While Requesting Data From Server in React JS
I have this component in my react app that depends on some data from the api servers. I use the react Suspense but this only lazy load my components then display then even when data has not yet arrived from API Servers.
How do I then wait until the…
OBI PASCAL BANJUARE
- 315
- 2
- 8
0
votes
1 answer
react best way to set a loading
I'm using a React.lazy along with Suspense to set a loading.
const LazyComponent = React.lazy(() => {
const x = new Promise((resolve) => {
setTimeout(() => {
return resolve(import("../Components/ListContainer"));
}, 3000);
});
…
itsMe
- 133
- 12
0
votes
1 answer
How to add react-spring animation component to React lazy loading?
I try use React lazy and Suspense loading. I have simple login page and animation page for lazy loading. But if I refresh or open this page I cant see animation. But when write fallback =
Loading...
like this it is work. How to do I do…
Feruz Atamyradow
- 11
- 4
0
votes
2 answers
How to implement a "render-as-you-fetch" pattern for routes in React
The new Relay hooks API has put a focus on the React pattern of "render-as-you-fetch" and so far I am really liking this. Relay's useQueryLoader and usePreloadedQuery hooks make implementing this most of the time pretty straight forward.
I am…
Charklewis
- 4,427
- 4
- 31
- 69
0
votes
1 answer
How to apply a smooth transition with React Suspense?
I lazy load a component with lazy & suspense. It works, but the transition is very raw. Is there a simple way to apply a smooth transition without wrapping each suspended component with a keyframe opacity animation(on each re-render it will trigger…
DoneDeal0
- 5,273
- 13
- 55
- 114
0
votes
1 answer
React suspense usage
Assume fetchUserProfile is defined elsewhere.
Is there anything wrong with Suspense usage?
import { Suspense, useState, useEffect } from 'react';
const SuspensefulUserProfile = ({ userId }) => {
const [data, setData] = useState({});
…
wangdev87
- 8,611
- 3
- 8
- 31
0
votes
1 answer
Get the height (dimensions) of a Suspense element after loading in react
Basically I was trying to render a really really long list (potentially async) in React and I only want to render the visible entries±10 up and down.
I decided to get the height of the component that's holding the list, then calculate the overall…
Samson Liu
- 460
- 4
- 20
0
votes
1 answer
JSON is printing in the console but returns undefined when accessing value of a key
I'm not sure how to modify the useEffect function (or use React's new Suspense component) to wait for all of the data to load in before rendering the components.
Here is the code that brings in the data from a Flask Backend:
import socketIOClient…
Zero Cool
- 2,541
- 2
- 8
- 13
0
votes
0 answers
wait for fetchQuery - React Suspense
I have a component which renders a spinner via
dimitry_n
- 2,939
- 1
- 30
- 53
0
votes
0 answers
How to apply lazy loading to react-router-dom?
I have a basic routing with two pages: home and about. I've imported both pages with react.lazy and wrapped each of them with a suspense fallback.
The homepage loads well, but when I want to navigate to /about, the page becomes blank, without any…
DoneDeal0
- 5,273
- 13
- 55
- 114