0

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?

Husnain Mehmood
  • 51
  • 7
  • 1
    Your question is a bit vague without seeing your CSS. Either hide the Footer component until loading is complete or restructure your primary layout so the Footer component is always at the bottom. – isherwood Jun 07 '22 at 19:27
  • This ia a common issues with footers. What you are likely looking for is a sticky footer, which has been asked here before, maybe this would help you: https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page – Daniel Black Jun 07 '22 at 19:46
  • Can't hide the footer because footer is located in the main file while loading is done on every individual screen – Husnain Mehmood Jun 07 '22 at 19:59

2 Answers2

1

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.

Lemon891
  • 104
  • 1
  • 6
  • I don't think this is what's desired. This would have the footer overlaying page content. – isherwood Jun 07 '22 at 19:27
  • Yes, however it would scroll with the page at all times, allowing you to still see all the content. Additionally while loading there would still be a set amount of open space not being filled so the logo can be viewed – Lemon891 Jun 07 '22 at 19:29
0

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?

JDawwgy
  • 888
  • 2
  • 18