filamentphp
Select field visual glitch while Choices.js is still loading
Package
filament/filament
Package Version
3.2.35
Laravel Version
10.3.3
Livewire Version
3.4.6
PHP Version
8.3
Problem description
There's a pretty jarring visual glitch when using non-native select fields. This is what is shown while the field is loading:
It's very noticable for people on slow connections. See this video: https://www.youtube.com/watch?v=Ruax9OpgDmU
I understand that the js is lazy loaded (and that's great) but there should be a better placeholder while the field is still loading. Currently UI looks broken for several seconds for people on slow connections. It's also an issue when the server is far away from the user (eg. Australia -> Germany) regardless of connection speed.
The giant white box with the dropdown arrow that shows while the field is loading isn't clickable either, which is even more confusing for users.
Expected behavior
Non-native select fields should have some kind of placeholder while Choices.js is loading to prevent them from looking broken.
Steps to reproduce
- Launch the reproduction repository
- Open the browser and throttle the connection to 2G
- Clear the browser cache, then open the create product page
The select will look broken for a few seconds.
Reproduction repository
https://github.com/binaryfire/filament-reproduction-repo
Relevant log output
No response
