Xojo2025R2.1: Hiding Spinner control after data is rendered in WebListBox using Data Source and Thread

Targets Web
1

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?

2

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.

3

I am not sure what you mean by “pre-pull the data”, could you please explain?

4

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.

5

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.

6

As I suspected. So… you’re doing yourself a disservice in caching all those rows. Mostly in speed but also in memory.

You’ll notice that the signature for getting rows is:

RowData (rowCount As Integer, rowOffset As Integer, sortColumns As String) As WebListBoxRowData()

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.

7

I asked a Google search on the Xojo Documentation and it returns nothing.

What is that in Xojo (Xojo name for it ?)

8

ProgressWheel perhaps.

9

Thanks.

Different word form, same Control. :frowning:

10

(post deleted by author)

11

Emilie, I have learned about the Spinner when I started using Xojo for the Web App development, this is what AI gives me when googling for the term:

In Xojo web applications, the term “spinner control” typically refers to one of two distinct UI elements, depending on context:

1. WebProgressWheel (Indeterminate Progress Indicator)

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.

12

Thank you.