Dropdown: visual glitch

[potatosalad94]

Describe the bug

I'm experiencing a visual glitch when refreshing the page with a dropdown component

I've attached a reproduction link with the same issue

Screen.Recording.2024-06-21.at.16.08.01.mov

Reproducer

https://stackblitz.com/edit/nextjs-btjxrx?file=app%2Fpage.tsx,app%2Flayout.tsx,app%2Fglobals.css

PrimeReact version

10.6.6

React version

18.x

Language

ALL

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[gcko]

@potatosalad94 I forked and updated your Stackblitz to make the issue clear: https://stackblitz.com/~/github.com/gcko/nextjs-knnkfy?file=app/page.tsx

Example of the issue:

@melloware the issue is due to a Flash of Unstyled Content (FoUC). The following styles are not being loaded until after the content is loaded:

<style type="text/css" data-primereact-style-id="base">...</style>
<style type="text/css" data-primereact-style-id="global">...</style>
<style type="text/css" data-primereact-style-id="common">...</style>
<style type="text/css" data-primereact-style-id="dropdown">...</style>

The main issue is that base includes styling to hide input, select, and chackbox fields, however because it does not get loaded right away, they "flash" before they are actually hidden

[melloware]

Yep we have an FOUC ticket: #5188

[gcko]

@melloware should this one be marked as a duplicate of #5188 since it is an a permutation of the same issue (FoUC)?

Also @potatosalad94 , Melloware provided a temporary solution to this on that ticket via taking the css, creating a file, and importing it in your root react file -> #5188 (comment)

[github-actions]

This issue is a duplicate and has already been reported and possibly fixed. Please review other issues both open and closed for a similar issue to this one.