My footer comes up when my loading screen is displayed-CodePudding

I have an analytics app that has a lot of data and is scrollable. I want to footer to be fixed at the bottom. It works when the data is loaded. However, I need to display the logo while data is being loaded. I use it like this:

 if (dataLoading) {
    return <img src={Logo} className="loading-gif" alt="loading" />;
  }

When this image is showing, the footer comes up and is fixed right under the picture. Here is the css for loading-gif:

.loading-gif {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10%;
}

My footer is under the rest of the layouts.

 <main className="App" ref={layout}>
      <Outlet />
      <Footer />
    </main>

Issue example: Issue UI

How do I make it so the footer stays off screen?

CodePudding user response：

you could try to center the .loading-gif class inside a container and set the container to

.container {
    height: 100vh;
}

which would effectively take up the whole screen while loading?

CodePudding user response：

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.