Как последовательно рендерить в reactjs?

Question

[Markiv07]

Здравствуйте Вот содержимое 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>

При переходе на какую-то из ссылок сначала рендериться Header -> Navbar -> Footer и только потом содержимое, а хотелось бы чтобы перед тем как отрендерится Footer рендерилось содержимое те Header -> Navbar -> Содержимое-> Footer. Не могу понять как это реализовать, рендерить свой футер для каждого из компонентов как-то не то

Answer 1

[Kirill Makarov]

Как вариант привязываешься к аксиос и глобально смотришь если идёт загрузка то не отображает футер. Но если тебя смущает что у тебя футер бегает из за загрузки то проще будет просто прибить его к низу