[BUG] Toggle is initially shown as checkbox before displaying correctly

[cwolcott]

Describe the bug
Has anyone seen this before?
When the toggle is initially displayed on the browser it is shown as a checkbox and then shows as a toggle.

To Reproduce
I have not produced an independent exmaple yet.

<input checked id="taxonomyMap" type="checkbox" data-toggle="toggle" data-size="sm" data-height="30" data-width="163" data-style="slow mt-2" data-onlabel="<i class='fa fa-earth-americas fa-spin' style='--fa-animation-duration: 6s;'></i>  Show Map" data-offlabel="<i class='fa fa-ban'></i>  Hide Map">

Nothing special dealing with the toggle element

Expected behavior
I wouldn't expect to the the toggle flash as a checkbox first.

Screenshots
If applicable, add screenshots to help explain your problem.


Video showing toggle initializing

Package:

• Bootstrap 5 Toggle version: [5.5.1]
• Bootstrap version: [5.3.2]

Desktop:

• OS: macOS Sonoma 14.6.1
• Browser: Chrome
• Version: Version 128.0.6613.138

Additional context
None

[luz-arreola]

I have seen this. I think that this could be solved by setting the control to hidden with CSS and then having JQuery (or JS) show it after the control has been rendered.

What this would do is show nothing until after the control is fully rendered.

[palcarazm]

The auto-render base on html properties is fired once when the page is loaded :

• If the checkbox is added after the auto-render have being fired, it will be render has a checkbox.
• If your page load slowly, you can view a flash of the checkbox and then the toggle.