How to fix component position start on bottom then move to normal in react js when the page is refreshed

user_12179850 0
Viewed 35

I have a component that has a sidebar and content as shown below.

strong text

When the page is refreshed, the first time the component content is loaded below as shown below and in an instant, the components are back to normal.

enter image description here

I use module.css in every component. With a structure like this:

component
|___Sidebar
|   |___index.tsx
|   |___index.module.css
|___Content
    |___index.tsx
    |___index.module.css

Can anyone explain what happened? Is this happening because I'm using css folder structure like that which causes styles to be late to read? How do you think this problem can be solved?

react-css-modules antd typescript reactjs javascript
1 Answers

One of the option is to load the CSS files in the index.js or app.js file which is the top most component in your app. Then you can use the dom event to add the component like below. Currently it is difficult to reproduce the issue since you haven't shared any code. But I would suggest worth giving this a try. Make sure you add the CSS files in index.js file

document.addEventListener("DOMContentLoaded", function(event) {
      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    });
user_66264610
Related