primefaces / primefaces/primereact
Flash of unstyled content (FOUC)
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
When using built in PR theme seeing a flash of un-styled content: https://en.wikipedia.org/wiki/Flash_of_unstyled_content
I have this super simple code
import React, {useState} from 'react';
import {TabMenu} from 'primereact/tabmenu';
import {MenuItem} from 'primereact/menuitem';
type NavbarProps = {
onPageSelected?: (page: string) => void,
menuItems?: MenuItem[],
}
export const Navbar = ({menuItems, onPageSelected}: NavbarProps) => {
const [activeIndex, setActiveIndex] = useState(0)
return (
<TabMenu
activeIndex={activeIndex}
model={
menuItems
}
onTabChange={(e) => {
setActiveIndex(e.index);
onPageSelected?.(e.value.id as string)
}}
/>
)
}
When the page first loads, it looks like this first for like 0.5 seconds
and then it changes to how it should really look
After some debugging I found out it is because when the component is loaded, it loads this global style
https://github.com/primefaces/primereact/blob/master/components/lib/tabmenu/TabMenuBase.js#L79
https://github.com/primefaces/primereact/blob/master/components/lib/componentbase/ComponentBase.js#L664
I recorded this video with the issue on the codesandbox i created
https://github.com/primefaces/primereact/assets/2165906/01eb40c2-e062-40ee-8934-3355b858f502
I would expect either
- The component should be auto-sufficient (i.e it looks properly on first load)
- To have a way to import the components css globally directly, next to the theme and min imports (something like
import "primereact/components/tabmenu.css
Reproducer
https://codesandbox.io/s/primereact-test-forked-xsr6gj?file=/src/index.js
PrimeReact version
10.0.7
React version
18.x
Language
TypeScript
Build / Runtime
Create React App (CRA)
Browser(s)
No response
Steps to reproduce the behavior
No response
Expected behavior
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.