0
176
ViewsHow to fix component position start on bottom then move to normal in react js when the page is refreshed
I have a component that has a sidebar and content as shown below.
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.
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?
1 answers
Answer question0
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')
);
});