primefaces / primefaces/primereact

Flash of unstyled content (FOUC)

Open
#5,188 26 comments 14 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Type: Bug Type: Performance
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

Screenshot 2023-10-29 at 3 24 56 PM

and then it changes to how it should really look

Screenshot 2023-10-29 at 3 24 47 PM

After some debugging I found out it is because when the component is loaded, it loads this global style
Screenshot 2023-10-29 at 3 27 42 PM

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

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.