Every time I visit a new route within the current session, I notice that the page loads and then takes about 2 seconds for the styles to be applied. This delay causes what is commonly known as CSS flashing or FOUC (Flash of Unstyled Content), which ultimately negatively impacts the user experience.
To resolve this issue, my best solution would be to ensure that the page only renders once it has fully loaded.
Does anyone have any suggestions on how to achieve this?
Furthermore, there are some other CSS-related issues that may be connected to the previous problem:
You can see a live example of this issue here:
When clicking on "Name Search" or "Weight Table", you'll notice that the page content is rendered before the CSS is applied. This behavior doesn't occur with the other two pages where no CSS frameworks are attached. It seems like the presence of CSS frameworks might be causing these issues, but how can this be addressed?
Another concern is that when refreshing the "Name Search" or "Weight Table" pages, the CSS framework fails to load properly, while the standard CSS does load correctly.
It appears that both of these issues stem from the usage of CSS frameworks since the pages without them function correctly.
Would anyone happen to know of any potential fixes or workarounds for these issues?
Here's an overview of how my components are structured, using "Weight Table" as an example:
<template>
<div class="weightconverter-wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="display-4 text-center mb-3"> Weight Converter </h1>
<form>
<div class="form-group">
<input type="number" class="form-control form-control-lg" id="filter" placeholder="Input weight..." @input="calculate">
</div>
</form>
<div id="results">
</div>
</div>
</div>
</div>
</div>
</template>
....(remaining component code)....
</style>
Note: The issue with reloading only occurs on the remote server; local reloading works fine (though there is still a FOUC).
PS2 - Just wanted to mention that the project was generated using "npm run generate".