This is a fairly typical issue in the WebApp I work on. I need to have the Spinner control (and/or WebProgressBar) show and hide whenever user wants to fetch some data into the list box.
The problem is that the data is supplied asynchronously via Thread using Data Source and the code hiding Spinner is executed prematurely for large data sets (let’s say 7,000 rows are eligible for the executed query).
I have tried implementing js MutationObserver (java script and WebHTMLViewer) as suggested by ChatGPT but this approach doesn’t work.
The Xojo WebListBox doesn’t provide “Rendered” event. The timer based call to hide Spinner is not providing accurate solution either since the data sets returned have various number of rows.
What else can I try?
Sounds like you’re doing something wrong with the dataset. When you get a request for rows, you’re meant to run the request against the database and return only the rows that it asked for at that moment. Don’t pre-pull the data.
This is what you said above. That indicates that you need a progress wheel or other “wait for it” indicator. if the DataSource is being used as designed, when it asks for rows it only asks for 30 or so at a time and you shouldn’t need an extra Thread to pull just 30 rows. To be clear, the request is already on a thread, so you’re probably just adding another level of complexity.
Now… if reading 30 rows of data out of the 7000 possible rows takes a long time (more than a second) then you might want to look at creating some indexes for your data so the query can return results faster.
If you could make a sample project showing what you’re doing, it might be helpful.
I think I need to clarify further. The table holds plenty of records (milions), the query in my example mentioned above runs quickly on the server and will fetch about 7,000 records as a result of the conditions specified in where clause. The WebListBox will render between 200-300 rows at the time.
In my WebPage the purpose of the thread instance is to execute query, fetch records on the server and cache resulting rows in an array as they come in. Data source instance bound to WebListBox gets rows from the cache of the thread instance. I realize that this may or may not be any faster than just using only data source instance (ie. no thread and no caching in array).
However, the question is when DataReload is done so that Spinner.Visible can be set to False. In other words regardless of the approach taken in feeding data into the list I need to know how to ensure that spinner is hidden right after the list is filled with data.
RowCount is the number of rows it is requesting, rowOffset is “how far from the beginning of the dataset (the “page”) and the sortColumns is the SQL WHERE clause.
If you query directly against your database and add limit and offset clauses like this LIMIT 10 OFFSET 20 at the end, you can actually make things much faster than your cached version. In that, if the user were to immediately scroll all the way to the bottom, you might only retrieve 400 rows out of the whole 7000 (200 at the top and 200 at the bottom).
Otherwise, what you are trying to do is certainly possible if you create an internal notification system, such that, when the query is completed, you send a notification to the session that tells the progress wheel to hide.
This is the most common use of the term “spinner” in modern web UI and in Xojo documentation.
Purpose: The WebProgressWheel (the web equivalent of the DesktopProgressWheel control) is used to provide visual feedback to the user that a process is running on the server and that the application is busy. It displays an indeterminate progress, meaning it shows activity without indicating how much of the task is complete.
Behavior: It’s a spinning animation (often a circular, spinning wheel icon).
2. Numeric Spinner (Up/Down control)
In other contexts (like desktop or mobile development), a “spinner” can refer to a control, often associated with a text field, that has up and down arrows allowing a user to increment or decrement a value within a specific range. This is sometimes referred to as a “numeric updown” control.
Purpose: To allow a user to select a single numerical value from a defined range using buttons or arrow keys.
Behavior: The value is displayed in an adjoining text box, and clicking the up/down arrows changes the value by a defined step.
Greg, one thing that is confusing to me, the LIMIT clause with OFFSET is automatically appended to the SQL Query by Xojo itself when using Data Source. So, I should not include this in the SQL Query.
The issue I have is really about making sure that Spinner (aka WebPRogressWheel) stays visible until the list shows the group of rows. Right now the Spinner disappears too early. The call back method is like:
Quite the opposite, you’re supposed to use it in your query to limit the response size to appropriately chunked batches. You are over-engineering with your caching system, the DataSource is supposed to tie the database querying to the WebListbox.
That’s what Greg’s getting on about. When done correctly, and I can personally confirm this is true, you do not need a spinner at all.
Not sure if you’ve tried this already, but if you put something in WebListBox.ProcessingMessage, it will show its dedicated spinner while the DataSource result arrives.
I did this of course, have timer delayed method that hides progress bar and the spinner but still, conceptually, this is only a workaround not solution. Anyway, thanks for your suggestion.
I haven’t tried as I have been using progress bar and spinner everywhere, I will give it a try and see, maybe it is a better visual indicator than progress bar and spinner.
