Questions tagged [react-lazy-load]
95 questions
3
votes
0 answers
React Send API call on Link hover to preload data
I'm trying to improve the UI of my React app, and one thing I want to try and work out is how to pre fire an API call when a user hovers over a link, so by the time they're clicked through, the data has already been loaded and FakeAPI.jsx has…
WillMaddicott
- 512
- 6
- 20
3
votes
1 answer
Why doesn't the loader show on the second test when I run the same test twice in jest, using react testing library, react.lazy, and suspense?
Here is a sample of my code
// App.js
import React, { Suspense, lazy } from "react";
const Loader = () =>
Loading...
const Login = lazy(() => import("./Login"));
function App() {
return (
George Tibetegya
- 116
- 1
- 7
3
votes
1 answer
Why is my react-lazyload component not working?
Up until a few days ago, my implementation of LazyLoad was working perfectly, but now I can't seem to get it to work.
This is my component:
import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';
const Image = image…
mortenbjoern
- 31
- 1
- 3
2
votes
0 answers
Is it possible to dynamically import/lazy load a React component from a url that wasn't in the original build?
So I have a setup where I want to allow custom components to be created and referenced via an API fetch call made by my react client site.
I know using dynamic imports and React.lazy these can be loaded dynamically instead of with the rest of the…
Programmer Unextraordinair
- 1,261
- 2
- 12
- 28
2
votes
0 answers
React Three Fiber, Three.js and Drei: lazy import models using components gets re-rendered to infinity
I'm trying to lazy import JSX models in React Three Fiber.
I have a couple of JSX models which incorporate useGLTF() from drei, to load the actual .gltf/.glb model, as nodes and materials, like in the R3F tutorial.
What I'm trying to do now, is to…
Jakub Pabis
- 21
- 3
2
votes
1 answer
React load only one scss based on variable
UPDATE: I figured out what was happening and there was no way for anyone to answer because a lot of missing information - like where were the light and dark variable files being exported to. Answer, everywhere... they were exporting everywhere so…
mezzomix
- 305
- 2
- 12
2
votes
0 answers
Chunk js file failing (404 Not found) for initial load only
I'm trying to implement code splitting using react JS + Next JS to reduce Initial load time of the page. But when I start my UI Service and try to run the webpage, a chunk file is created successfully with 200 status code but immediately another…
Sharanya M
- 21
- 4
2
votes
0 answers
React Lazy Import does not include CSS files
I have a react app setup with CRA.
In my App.js I would load my css files, components and define my routes.
import 'semantic-ui-css/semantic.min.css';
import './css/global.css';
import './index.css';
import 'react-grid-layout/css/styles.css';
import…
Alk
- 5,215
- 8
- 47
- 116
2
votes
1 answer
Styles don't apply when using React.lazy
The problem is that when I start using React.lazy, input styles are not rendering correctly. With lazy I get default Antd input styles, not mine. What's the problem and how I can fix it? You can see my code and its results in the pictures below.…
Levon Dalakyan
- 21
- 3
2
votes
0 answers
How to code split Map component in react-map-gl?
I'm trying to codesplit a react-map-gl Map component into its own chunk using Lazy,Suspense.
This is my component.
import 'mapbox-gl/dist/mapbox-gl.css'
import React, {lazy, Suspense} from 'react'
const Map = lazy(() =>…
straylightrunner
- 23
- 1
- 5
2
votes
2 answers
Differentiate component error vs React.lazy error in eror boundary
I have a question regarding the React.lazy() feature. I developing a feature and i am stuck at a point.
My scenario
I have a set up where i am
Loading bunch of components lazily using React.lazy()
Have a Error boundary wrapper above Suspense.
There…
Vikhyath Maiya
- 3,122
- 3
- 34
- 68
2
votes
1 answer
Property 'default' is missing in type 'typeof import("...")' but required in type '{ default: ComponentType; }'
TypeScript error when I'm trying to import one React component into another using React.lazy
templates/BugReport/index.tsx
import { useEffect, useContext } from 'react';
import BugReportStatic from '@tamm/ui-lib-v2-bug-report';
import baseUrl from…
Hayk Simonyan
- 202
- 4
- 16
2
votes
0 answers
React.lazy + Suspense or alternative?
in my app, I have two large components which include a lot of panels, and every panel has a few or more other components. Which takes a long time to render. I guess 1-2sec.
A simple example of how this works. I have 2x tabs, we can call them tab1…
TomTom
- 31
- 1
2
votes
2 answers
React Code Splitting in React.createElement()
I have pages or large components that need to be rendered after the main page loads. I have them lazily loaded but am getting an error when I use in createElement():
LazyExoticComponent | LazyExoticComponent is not assignable to parameter of type…
user15528054
2
votes
2 answers
Lazy load a module using React lazy?
Is it possible to load a heavy module using React.lazy?
I have a very heavy raw file parsed as string (around 10 mb) and I would like to lazy load it.
After trying:
const Module = React.lazy(() =>
import("./heavyModule").then((heavyModule) => {
…
Rashomon
- 5,962
- 4
- 29
- 67