[Dropdown] How to show loading mark for dropdown list?

[leadstar116]

Expected Result

First of all, I am so excited to use Semantic UI. I have one problem with multiple dropdown. I am using dropdown for selecting cities from USA. Totally, it has around 28,000 items and it makes lazy loading for selecting and searching for city name. Is there any way to show loading mark when Dropdown loads all items and search so let customers know it's still working? Currently, it shows result in 5~8 seconds which is really not good for customers.

Actual Result

Version

2.4.1

[GammaGames]

Have you tried putting an icon in it? It looks like the icon will turn into a loader

[leadstar116]

@GammaGames Thanks for your comment. How can I add that icon to dropdown?

[GammaGames]

The example I linked to has a example for search:

<div class="ui search">
  <div class="ui left icon input">
    <input class="prompt" type="text" placeholder="Search GitHub">
    <i class="github icon"></i>
  </div>
</div>

I realized you said you are using a dropdown, not search. The remote content example for search functionality with remote content, why not have an empty dropdown and then filter the list of towns with the entered string?

[leadstar116]

@GammaGames I am using remote content dropdown but have some minor issue. List doesn't update even I type nothing existing. FYI, here's the link to screenshot. https://screencast.com/t/MCgW9ObzI2CT Thanks.

[leadstar116]

`

Location (optional)

Your current city/state

`

[leadstar116]

Hi, @GammaGames Any idea for this?

[lubber-de]

@leadstar116 See the following example (uses the community fork https://github.com/fomantic/Fomantic-UI 2.8.3, but should work with SUI 2.4 as well) https://jsfiddle.net/aoqs729v/

[GammaGames]

Aha, there he is! I was going to suggest leadstar go post the issue on the fomantic repo because it is actively maintained and has very helpful (and faster to respond) users :)

[leadstar116]

Thank you, guys! Sorry for the late response but this helped me...

[GregoryR13]

To force loader on remote (multiple) search dropdown if not visible (right "caret down" icon unused) :

css:

.ddloader {
        visibility: hidden;
    }

#yourDropdown.loading .ddloader {
        visibility: visible;
    }

Jquery : $('#yourDropdown input:first-child ').after('<i class="dropdown icon ddloader"></i>');