Component: Dropdown | Flash of unstyled content - On navigation only

[Moograine]

Dropdown Style Latency / Delay

Hey,

I have a huge form, where I have multiple PrimeNG components. Mainly inputtext and dropdowns. I have a custom.scss, where I've changed the border-color and background-color properties for the inputtext, dropdown and button components.

On page load, everything is fine, every style loads instantly.
Whenever I navigate to another page, and navigate back to the component containing the form, there is a glitch for about 0.25 - 0.5 second, until the dropdown's border-color remains white (when nor the default theme nor my custom stylesheet's border-color is white) and then it suddenly switches to the actual color which I've set.

This also happens with my buttons in this component. But weird enough, it doesn't happen to any of the inputtexts.

Does anyone have any idea what's happening? Everything worked great, while I was running this project in Angular 15.2 and Primeng 15.2, but now with Angular 18.2 and Primeng 17.8, this keeps happening, and I've been debugging it all day, with no results. And let me tell you, it's not fun to debug a border-color issue for a whole day (and still go to sleep without any solution).

Thank you for reading my issue.

Environment

Development

Reproducer

No response

Angular version

18.2.0

PrimeNG version

17.8.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.5.1

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨