Questions tagged [react-lazy-load]
95 questions
0
votes
2 answers
Testing lazily initialized components with Jest
I am trying to test my lazy initialized component, made with react-lazy-load-image-component using JestJS. Below are my tests:
const viewModel = new VehicleViewModel(vehicleData, {});
const mockOnClick = jest.fn();
const mockStore =…
Igor Shmukler
- 1,742
- 3
- 15
- 48
0
votes
1 answer
React lazy loading and server set up
From what I understand, React lazy will split your bundle into multiple files. Let's say I use lazy loading with React.router. If our server is set up to send the whole bundle through a GET request, how does React.router incrementally get the files…
Oleks G
- 94
- 5
0
votes
0 answers
lazysizes is not lazy loading image
lazysizes seems to simple to use, but I can't get it to actually lazy load an image with react... it loads the bottom image thats out of the viewport before it's scrolled into view, as you can see in this minimal codesandbox example.
const id =…
benmneb
- 1,773
- 1
- 15
- 26
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
1 answer
React loadable issues
So the problem I am facing is this. When I load the page, the stylings of the Header component are not being rendered, but when I remove the load Logic they are. The problem might lie in Header component BCS it is in every Route except Login. I need…
mura1
- 472
- 5
- 20
0
votes
1 answer
How do I set the target location for a React Lazy chunk using Laravel Mix?
So my React Lazy setup works great, I use Laravel Mix instead of the normale Webpack config. But after running, the (named) chunks are all put in the public folder, instead of the public/js folder. The site works great, but just for organization I…
Ramon
- 1
- 1
0
votes
0 answers
React lazy not working and not showing any error in console
I'm a beginner to React and trying to use React.lazy but failed and it's not showing any error in console. Please help
import React, {Suspense } from "react";
import { Route, NavLink, Switch, Redirect } from "react-router-dom";
//import NewPost from…
Kamal
- 2,140
- 8
- 33
- 61
0
votes
0 answers
Using React Leaflet with lazy loading
I am using React Leaflet. React and everything is working fine, but when I try to use React lazy loading the map just not render or render a small square as shown below. It is just a small box.
Mohamed Fawzy
- 31
- 5
0
votes
1 answer
React Router mounting and unmounting parent component
I am creating a react app with react-router@latest and with code splitting. Everything works fine except the layout component re-renders everything when ever I click on About link or a dashboard link. Please help me out how to fix this. I had…
Riy
- 479
- 1
- 8
- 16
0
votes
0 answers
Is there any difference between using React.lazy suspense against using onLoad prop in a ![]()
?
I would like to know which are the benefits of using React Lazy and Supense against what I am showing you below. First Example is using useState and Onload Prop, and second example is using React Lazy and Suspense.
const ImageComponent = ({ src })…
Giler
- 47
- 5
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
0
votes
1 answer
React Lazy made Switch Not using?
enter image description here
I have a bug when I using React. Lazy then 404 display at another route.
import React, { lazy, Suspense } from "react";
import { Route, Switch } from "react-router-dom";
import "./styles.css";
const HomePage = lazy(()…
JhonCowNut
- 11
- 2
0
votes
2 answers
Lazy loading ReactJS component
I'm building SPA (single page app) using React and React-Router.
"Employees" is one of the navigation menu items in the header.
According to the docs - Route-based code splitting, I'm trying to make components lazy loading like this:
import React, {…
LirysJH
- 184
- 2
- 15
0
votes
1 answer
How to use React Lazy loading for redux connected component?
I am super excited to use React.Lazy loading, however my component is using redux and I am getting warning error saying
index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render.…
Negin Basiri
- 1,305
- 2
- 26
- 47
0
votes
1 answer
React-lazy-load-image-component: how to add a transition?
I have a list of images made with React-lazy-load-component library, it works very well, but I can't have any transition effect, as promised by the documentation.
Here is my code:
const LazyPicture = styled(LazyLoadImage)`
object-fit: cover;
…
DoneDeal0
- 5,273
- 13
- 55
- 114