In my app, I use an OptionSelector to choose from a list of bike stations. I also have a map component with placemarkers for each station.
When I tap a placemarker, it also changes the OptionSelector to the index of the corresponding station, as this is good UX.
What isn't good UX is how the OptionSelector responds to this index change, which is animating itself as if it had been flicked by the user's finger. In other words, long after the user has tapped the map marker and received all the information they need, the OptionSelector is still "spinning" to the index of the station.
Here is a video demonstrating this behaviour: https://www.youtube.com/watch?v=jXKWlAmNYsw
I'd like for this OptionSelector to just change its index immediately, with no animation. Is there a way to do this?
Here's how I currently do things. I'm more than happy to be corrected if this is the wrong way of going about this. I use a WorkerScript (a QML thread, more-or-less) to make API calls. When this WorkerScript returns, it moves the OptionSelector like so:
WorkerScript {
id: queryStationsWorker
source: "../js/getstations.js"
onMessage: {
[...]
// Move the OptionSelector to the corresponding station's index.
stationSelector.selectedIndex = getLastStationIndex(lastStation.contents.stationName, stationsModel)
/*
* For the sake of clarity:
*
* getLastStationIndex() is a function which just returns an integer.
* lastStation is a U1DB database used for state saving.
* stationsModel is a model containing all of the stations.
*/
}
}
Any help or insight appreciated - cheers!