How to render sequentially in reactjs?

Question

JavaScript

Hello Here is the content of App.js

<div className="App">
      <Header/>
            <Navbar/>
        <div className="routes" style={{margin: "0px 10% 0px"}}>
            <Routes>
                <Route exact path={"/"} element={<NewsTop />}/>
                <Route exact path={"/:id"} element={<CardDetails />}/>

                <Route exact path={"/politic"} element={<JustNews/>}/>
                <Route exact path={"/politic/:id"} element={<CardDetails/>}/>

                <Route exact path={"/society"} element={<Covid/>}/>
                <Route exact path={"/society/:id"} element={<CardDetails/>}/>

                <Route exact path={"/covid"} element={<War/>}/>
                <Route exact path={"/covid/:id"} element={<CardDetails/>}/>

                <Route exact path={"/sport"} element={<About />}/>
                <Route exact path={"/sport/:id"} element={<CardDetails />}/>

                <Route exact path={"/media"} element={<About />}/>
                <Route exact path={"/media/:id"} element={<CardDetails />}/>

            </Routes>
        </div>
        <Footer/>
    </div>

When switching to any of the links, the Header -> Navbar -> Footer is first rendered and only then the content, but I would like the contents of those Header -> Navbar -> Content-> Footer to be rendered before the Footer is rendered. I can’t figure out how to implement this, rendering my own footer for each of the components is somehow wrong

Answer 1

As an option, you bind to axios and globally look if the download is in progress, then it does not display the footer. But if you are embarrassed that your footer is running due to loading, then it will be easier to just nail it to the bottom