Improve Choices.js select field appearance while script is loading

[binaryfire]

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 I think 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 large 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

1. Launch the reproduction repository
2. Open the browser and throttle the connection to 2G
3. 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

[zepfietje]

Would indeed be nice to improve the appearance of the field when Choices.js hasn't loaded yet.
For us it's a low priority improvement to make though, so feel free to attempt a PR that addresses the issue already.

Happy to review. 🙂

[danharrin]

#11631

[binaryfire]

Hi @valentin-morice

#11631 seems to created some other issues when ->multiple() is used (multi-select). This is what users on slow connections are seeing now:

@danharrin Could you re-open this issue?

[binaryfire]

I've updated the reproduction repo. Clear you browser cache, throttle the connection in the inspector then load the product create form and you'll see this:

[valentin-morice]

@binaryfire @danharrin I've tried setting up a multi-select with the package preceding the PR and the behavior is similar. I'll have a look at it.