Why does my React sidebar jitter every time I load a new page?-CodePudding

For context, I am using React-Bootstrap's library. Whenever I click on an href in my code, the sidebar will jitter for half a second, almost like it's resetting to its non-styled state, and then return back to its normal form. Does anyone know why this would be? Is it because my code is too slow? Below is my code for the side bar:

import React from "react";
import "../../App.css";
import { Nav, Navbar } from "react-bootstrap";
import ProfileSection from "./ProfileSection";
import ContactBar from "./ContactBar";
import HomeItem from "./SidebarItems/HomeItem";
import BlogItem from "./SidebarItems/BlogItem";
import WorkItem from "./SidebarItems/ProjectItem";
import PhilItem from "./SidebarItems/PhilItem";
import { Container } from "@mui/system";

function Sidebar() {
    return (
        <Navbar expand="lg">
            <Container>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav defaultActiveKey="/" className="flex-column">
                        <ProfileSection />
                        <HomeItem />
                        <BlogItem />
                        <WorkItem />
                        <PhilItem />
                        <ContactBar />
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
};

export default Sidebar;

CodePudding user response：

Your code is working fine on my device .. must be some internet or device issues. Also i have checked your code, your code is fine. Do not worry once you deploy it will work fine.