Flash of unstyled content (FOUC)

[gslopez]

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

[melloware]

I agree I have seen this same flash flicker when it renders.

This is known as FOUC https://en.wikipedia.org/wiki/Flash_of_unstyled_content and maybe all those base styles need to be extracted into a primereact.css like you said so if we want we can include it in the page and not need each component to dynamically add the CSS to the HEAD

[melloware]

@gslopez check this out can you try this: https://codesandbox.io/s/primereact-test-forked-9cl6y8?file=/src/styles.css

I merged all of the base styles into a single CSS file to load. If this meets your needs I think I can propose something clever.