The web editor for mobile apps shows a loading indicator (skeleton loader) for components like selects and collections when the source query is running. In the below, you can see the loading indicator for both a select, and a collection view:
The indicators are not showing on my mobile app, leading to a bad user experience and in some cases, allowing the user to select inputs before queries are complete. Here's a screen recording of the app running on an iOS device. The select allows the user to click before the query is complete, and the list collection does not indicate that the query is running.
+1
I'm experiencing this issue as well.
Screen Refreshing loading indicators aren't showing up in my mobile app (Retool Mobile v3.66.0 on iPhone), but in the web editor/preview (Retool Cloud v3.70.0) they do.
Hello everyone! We recently changed the way loading works to optimize for performance on Mobile Apps.
Here is an example of an app where a query runs when the value of one select component changes, updating the value of a second select component.
If you play it at 1x speed you'll notice the second select component flashing while the query is running, this is what used to happen. With the recent changes we made, the component loads its data faster, and the user can interact with the second component immediately after making the first selection.
The same applies to components with a data source that pulls much more data. Here is an example of a Grid View populated by a query that pulls hundreds of rows.
These changes should have improved performance across all of our apps. It's likely that we don't see the loading skeleton because enough data to render is ready almost immediately after a query runs, or after loading the app. However, there is always the possibility that there may have been a regression that is affecting us.
Could you please share screen recordings of what we are seeing on the mobile device? This would help us identify the root of the issue.
Thank you for following up. In the link to the screen recording I shared, the user is able to choose the select component before the query that supplies data to that select component is complete. You can see the delay after the user hits the select dropdown. This results in a few problems:
When the query is running, the user could still see results from the previous query run
The user sees a blank section when tapping the select
The first item is a much bigger issue, but the lack of loading indicators causes a bad user experience, making my users think the app is broken. Data is just appearing when the queries finish, and showing data from preview query runs in some cases.
My app also seems to no longer be respecting checks to see if state variables are empty. I have a few workflows where:
The user selects an option
That select triggers a query
I store the results in a state variable
I check to see if that variable is empty to hide/show UI components
The app is showing components that should be hidden. Example:
I'm sorry I missed your video, I can clearly see the issue there. For the hidden property, it may be not hidden because of cached data. While we investigate the issue with the component being accessible while the data source has not updated, try setting the disabled property of the Select component to {{ queryName.isFetching }}
And use the name of the query that is running to populate the its data. Please let me know if this workaround works for you on the meantime.
@sgodoshian and @Danielle_Levy, we would appreciate if you could share a screen recording of how this is affecting your apps. The more context we get the better. Feel free to send it as a DM if you would not like to share your App publicly.
Is there any suggested fix at this point in time, or a timeline on an update to the mobile app? The web version is working great, but the mobile experience is not usable for my team.
I'm sorry to hear the mobile experience is not usable for your team, I added this feedback to the report. Our engineers are looking into the loading indicator issue we reported but no updates yet. On the meantime, I'm happy to help you find workarounds for the issues you are experiencing.
For the current missing indicators, did disabling the component while the isFetching property evaluates to true prevent the dropdown from opening while the query is running? We could also set the "Placeholder" to show "Loading..." while the query is running to have the component not only be disabled but show this as an indicator.
I'm still experiencing issues with the loading indicators described above. For the time being, I've directed all of my users are accessing my app through the browser.
The fact that the app performs different on web and mobile makes it difficult to develop. Is there any other info I can provide on my app to help develop a fix?
Thank you for your offer! I extended it internally.
Did we try this approach?
An alternative is to deploy a Self-hosted instance on a previous version where this wasn't happening but this may have an impact on your bill and require extra work.
