0

I'm trying to use react lazy. I don't want the suspense to cover the page, but when it loads a component it shows the suspense blocked icon on the whole page. How can I show it just where the component is supposed to be?

The lazy function:

const LandingPage = lazy(() =>
  import('./auth/landing/landing').then(({ LandingPage }) => ({ default: LandingPage }))
);

<Suspense fallback={<Loader />}>
              <LandingPage />
              </Suspense>

The loader component:

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;
      }
    }
  }
`);

thanks to anyone who will answer:)

Shan
  • 45
  • 4
  • I have posted the answer [here](https://stackoverflow.com/a/72918967/7447715) Since both the questions are similar so I fear duplicating answer. – Ashiq Dey Jul 09 '22 at 04:56

1 Answers1

0

This probably happens because of your CSS.

  position: absolute;
  width: 100%;
  height: 100%;

If you don't have a container (where your Suspense is positioned in) with position: relative you will end up with a ball absolute positioned and stretched over your entire screen.

I put your snippet in a plain HTML/CSS fiddle, so you can see what to do:

https://jsfiddle.net/qLzcuo7h/

As you can see you would expect that your loader is within the both component boxes. But they aren't.

What you need to add is position: relative to the .component to make it work.

In you given code I can't see what element your parent is, since the Suspense is the outer element. I can't see where you will put that element.

The below fiddle is with the relative addition.

https://jsfiddle.net/qLzcuo7h/1/

Hope this will clear things up.

gkempkens
  • 440
  • 4
  • 12