1

This is my App.js,

import React, { Suspense } from 'react';
import './App.css';
import SyncLoader  from "react-spinners/SyncLoader";
const Newhome  = React.lazy(() => import('./COMPONENTS/Newhome'));
function App() {
  return (
    <div>
      <Suspense className='App' fallback={
        <div className='align'>
          <SyncLoader  size={'20px'} color='#FF5757' className='loader App'/>
        </div>
      }>
        <Newhome />
      </Suspense>
    </div>
  );
}
export default App;

The problem with this is the image is taking some more time after the loader disappears, I also tried to reduce the image size.

But nothing is happening, can anyone suggest to me what should I change in this code?

The image is in the Newhome.jsx which is imported at the top.

Ankit
  • 1,359
  • 1
  • 2
  • 15
  • To make sure that the image is correctly imported, check the network tab in your browser's developer tools to see if the image is being loaded correctly. Also make sure that the fallback prop is correctly rendering @Ankit. – DSDmark Dec 25 '22 at 07:00
  • The question is not about importing and all props are working fine, my question what should I do so that image is also loaded after the loader is gone. – Ankit Dec 25 '22 at 07:05
  • As you described in your question. `The problem with this is the image is not loading after the loader disappears, I also tried to reduce the image size.` If your image is not loading after loader gone. Then, that is only means, It could be an issue with the `Suspense` component or `Newhome` component. (If the image is being correctly imported) – DSDmark Dec 25 '22 at 07:19
  • Plese see the question again, I have edited it. – Ankit Dec 25 '22 at 07:20

0 Answers0