Select Component Displays Raw Value Instead of Selected Text While Loading Data

[RahulKhandelwal17]

Description
A Select component with a display condition remains hidden on form load. When it becomes visible, it temporarily shows a raw value in the dropdown instead of the actual selected text while loading data from an API. This creates a poor user experience, as users see an unintended value before the data is fully loaded.

Version/Branch
v5.0.0-rc.2

To Reproduce
Steps to reproduce the behavior:

1. Add a Select component in FormIO and configure it with a display condition (initially hidden).
2. Set its data source to fetch options from an API URL.
3. Trigger the condition to make the Select component visible.
4. Observe the dropdown while it is loading data from the API.

Expected behavior

1. The Select component should either remain empty or show a loader while fetching data.
2. Once the data is loaded, the actual selected text should be displayed correctly.

Actual Behavior

1. When the Select component appears, it temporarily displays a raw value in the dropdown instead of the correct selected text.
2. This issue persists until the API call is completed, after which the correct text is shown.

Screenshots
Attached video.

Select.Component.Raw.Value.mp4

Additional context
Proposed Solution:

1. There should be a way prevent the incorrect value from appearing while the data is still loading?
2. Can we show a loader instead of this value until the API fetch completes?

Add any other context about the problem here.
Sample form JSON to reproduce it on builder

{"display":"form","settings":{"pdf":{"id":"1ec0f8ee-6685-5d98-a847-26f67b67d6f0","src":"https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"}},"components":[{"label":"Select","widget":"choicesjs","tableView":true,"data":{"values":[{"label":"a","value":"a"},{"label":"b","value":"b"}]},"validateWhenHidden":false,"key":"select","type":"select","input":true},{"label":"Dependent","widget":"choicesjs","tableView":true,"dataSrc":"url","defaultValue":29,"data":{"url":"https://jsonplaceholder.typicode.com/todos","headers":[{"key":"","value":""}]},"valueProperty":"id","template":"{{ item.title }}","validateWhenHidden":false,"key":"dependent","conditional":{"show":true,"when":"select","eq":"b"},"type":"select","lazyLoad":false,"selectValues":"data","disableLimit":false,"noRefreshOnScroll":false,"input":true},{"type":"button","label":"Submit","key":"submit","disableOnInvalid":true,"input":true,"tableView":false}]}

[lane-formio]

We weren't able to reproduce in 5.x versions. Can you try updating to @formio/js@5.0.1

[RahulKhandelwal17]

We tried using 5.1.0 and 5.0.x and still able to reproduce this issue.
Please find the attached video and sample html of the same.

FormIO.Select.Component.Showing.Value.in.Dropdown.mp4

FormIO.txt

[lane-formio]

Can you provide a jsfiddle?

[RahulKhandelwal17]

https://jsfiddle.net/p2you5q9/

Select b from the first dropdown.