0

I have a simple react app, and im trying to add a simple loading overlay. I saw the most common usage is react-loading-overlay.

My main app.js structure looks like that, I have a simple menu and a deck.gl map

      <div className="container">
          <AppMenu/>
          <div className="deckgl_map">
              <DeckMap/>
          </div>
      </div>

If I get it correctly, to use the loading overlay, I need to do something like that (using true for testing):

      <LoadingOverlay
       active={isActive}
       spinner
       text='Loading your content...'
       >
      <div className="container">
          <AppMenu/>
          <div className="deckgl_map">
              <DeckMap/>
          </div>
      </div>
      </LoadingOverlay>

But once I do that, my entire app page, instead of filling the whole screen, just takes the top 20% of the screen (and the rest is empty white).

Why wrapping my component with the LoadOverlay component causes the whole page to look weird? Do I need to "play" with the CSS for the LoadOverlay component?

tamirg
  • 607
  • 1
  • 7
  • 15
  • 1
    Yes, you need to "play" with the css. Add a className to the LoadOverlay component then add height: 100vh. Check this : https://stackblitz.com/edit/react-nxkybh?file=src%2FApp.js – MB_ Mar 18 '21 at 15:12
  • thanks, it solves it. i wonder though why using % doesnt work and only vh – tamirg Mar 21 '21 at 11:35

0 Answers0