import image from './image.jpg';
import { useEffect, useState } from 'react';

const ImageComponent = () => {
  const [base64Image, setBase64Image] = useState('');

  useEffect(() => {
    fetch(image)
      .then(response => response.blob())
      .then(blob => {
        const reader = new FileReader();
        reader.onloadend = () => {
          const base64String = reader.result;
          setBase64Image(base64String);
        };
        reader.readAsDataURL(blob);
      });
  }, []);

  return <img src={base64Image} alt="cached-image" />;
};

export default ImageComponent;

import { lazy, Suspense } from 'react';

const LazyImage = lazy(() => import('./Image'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyImage />
    </Suspense>
  );
};

export default App;