Estoy trabajando en un proyecto de Gatsby que tiene un componente SVG grande (alrededor de 300 kb). ¿Hay alguna manera de cargar de forma diferida este componente, idealmente mostrando una rueda de carga? Me gustaría evitar que el SVG grande impacte negativamente en la primera pintura. Algunos elementos de este componente tienen detectores de eventos y eventos de clic para enrutar al usuario a diferentes páginas, por lo que no es solo una imagen SVG estática.
import React from "react"; import { navigate } from "gatsby"; const clickEventHandler = () => { // some logic // ... navigate("/path") }; export default function SVGMap() { //... some component logic ... return ( <svg id='very-large-svg'> <path d="" style={{...}} onClick={clickEventHandler} /> </svg> )};En mi página de destino me gustaría usar este elemento
import SVGMap from './svgmap.js' export default function Page() { return( <> {/* Lazy load this while the rest of the page is already being displayed */} <SVGMap /> </> ) };¿Hay alguna manera de cómo hacer esto?
Puede usar React.lazy con suspenso para dividir el código.
const SVGMap = React.lazy(() => import('./svgmap')); <Suspense fallback={""}> <SVGMap /> </Suspense>https://tr.reactjs.org/docs/code-splitting.html#reactlazy
o puede usar la biblioteca de terceros @loadable/component.
import loadable from '@loadable/component' const SVGMap = loadable(() => import('./svgmap'))