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:)