Estoy tratando de usar reaccionar perezoso. No quiero que el suspenso cubra la página, pero cuando carga un componente muestra el icono de suspenso bloqueado en toda la página. ¿Cómo puedo mostrarle dónde se supone que debe estar el componente?
La función perezosa:
const LandingPage = lazy(() => import('./auth/landing/landing').then(({ LandingPage }) => ({ default: LandingPage })) ); <Suspense fallback={<Loader />}> <LandingPage /> </Suspense>El componente del cargador:
import React from 'react'; import classnames from 'classnames'; import styled from 'styled-components'; // eslint-disable-next-line import/no-default-export export default React.memo(styled(({ className }) => ( <div className={classnames('loader', className)}> <span className="loader__ball loader__ball--1" /> <span className="loader__ball loader__ball--2" /> <span className="loader__ball loader__ball--3" /> </div> ))` display: flex; position: absolute; width: 100%; height: 100%; justify-content: center; align-items: center; span.loader__ball { display: inline-block; margin: auto 0.25rem; height: 0.75rem; width: 0.75rem; border-radius: 0.375rem; background: #000000; &.loader__ball--1, &.loader__ball--2, &.loader__ball--3 { animation: bulging 2s infinite ease-in-out; } &.loader__ball--1 { animation-delay: -0.4s; } &.loader__ball--2 { animation-delay: -0.2s; } @keyframes bulging { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } } `);gracias a quien responda :)
Esto probablemente sucede debido a su CSS.
position: absolute; width: 100%; height: 100%; Si no tiene un contenedor (donde se coloca su Suspenso) con position: relative , terminará con una bola en posición absoluta y estirada en toda su pantalla.
Puse su fragmento en un violín simple de HTML/CSS, para que pueda ver qué hacer:
https://jsfiddle.net/qLzcuo7h/
Como puede ver, esperaría que su cargador esté dentro de las cajas de ambos componentes. Pero no lo son.
Lo que necesita agregar es position: relative con el .componente para que funcione.
En su código dado, no puedo ver qué elemento es su padre, ya que Suspense es el elemento externo. No puedo ver dónde pondrás ese elemento.
El siguiente violín es con la adición relativa.
https://jsfiddle.net/qLzcuo7h/1/
Espero que esto aclare las cosas.