Flash of unstyled content (FOUC)

[github-actions]

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

primereact.issue.mov

I would expect either

1. The component should be auto-sufficient (i.e it looks properly on first load)
2. 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

---

Original issue:
primefaces/primereact#5188

[github-actions]

Hi @gslopez,

This issue has been migrated from:

primefaces/primereact#5188

Please continue the discussion here.

Thanks for your original report!

[sja-cslab]

@melloware you put a lot of effort in this one - you want to keep it?

[melloware]

Let me go look at my old PR.