Loading Spinner while gallery data items are retrieved

[vladimir84]

Hi everyone,

I have 2 galleries, you click a row on the first, and the second's data is populated from SQL, filtered by the id_cal value of the first gallery.

I need to put spinner or a rectangle over the second gallery that says "Please wait", when the person clicks the 1st gallery's item, until the moment the 2nd gallery is populated with data.

It doesn't matter what it is, the tricky part is to show it until the data is completely loaded.

The reason for this is that the retrieval from SQL makes the gallery items behave like those old airport timetable flapping letters and if the retrieval takes longer than a couple of seconds, the user might think that the old data or gibberish data is the valid data. 

If this was probably answered, I'm having trouble finding it. 

[yashag2255]

Hi @vladimir84 

To build such a functionality, can you try to use collection on second gallery and toggle the visibility of loading spinner?

Gallery1 -> OnSelect -> Set(ShowLoadingSpinner,true);ClearCollect(CollectionGallery2,Filter(...Expression used on Gallery 2's Items Property));Set(ShowLoadingSpinner,false)

Gallery 2 -> Items -> CollectionGallery2

Loading Spinner on gallery 2:

1) Add a rectangle shape icon on gallery 2 or the area where you want to restrict control because of spinner. Set its fill property to transparent color. 

2) Download a loading spinner GIF of your choice and add it as a media on app.

3) Add an image control over the rectangle and set the Image property to added GIF.

4) Set the Visible property of both rectangle and image as "ShowLoadingSpinner".

This way it will show the spinner as soon as an item is selected in gallery1. Then it will load the items to display in a collection and once the query data is completed, the spinner will be invisible.

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[vladimir84]

Thank you @yashag2255 for the extensive guide.

I did that a while ago, and I remember PowerApps in the front-view sometimes not completing the request, therefore the rectangle remained visible all the time, and basically left the user stuck with the unsaved work. 

But I haven't tried to use a collection as at intermediate step. Luckily, these are just a few rows. Let me see....

[vladimir84]

No, this will not work (the collections work, but the process will be too complex to maintain in the future releases). 

I think this need to be addressed at the SQL connector level, like prevent data from showing before it's loaded or have a loading spinner control on a Gallery.

[yashag2255]

@vladimir84 

If you want to overcome the dangling variable issue, then you can add expression Set(ShowLoadingSpinner,false) as various events like OnVisible of page etc. While for only restricting the spinner to gallery, I am afraid there is no direct way to accomplish the expected behavior. If you do not want to use collection directly in the Items property, then you can also set the Items property of gallery control to: Filter(DataSource, ID in CollectionName.ID). This will filter all the records that exist in collection and yet keep the direct link to datasource.

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[vladimir84]

@yashag2255 

"set the Items property of gallery control" That's the main reason for this post. The items don't get immediately updated, but you see that they are being updated by those 3 moving dots on the top of the screen?

If I could somehow link the Visible property to those three dots, the whole issue would have been resolved. I would simply say If([3 moving dots].Visible, true, false).

[yashag2255]

@vladimir84 

I am afraid there is no way to track three dots on a formula which is applied directly to Items property. An indirect solution would be to use collection. 

As suggested earlier, you can follow:

1) Show Spinner and add a collection

Set(ShowLoadingSpinner,true);ClearCollect(CollectionGallery2,Filter(...Expression used on Gallery 2's Items Property));Set(ShowLoadingSpinner,false)

2) Refer to data source in the gallery items but make it dependent on collection. This way even if you add complex details later, it is adjustable.

Ex: Filter(DataSourceName, ID in CollectionGallery2.ID)

This will clear the collection when the data is loading.

Hope this Helps!

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

[ProgrammerJaDe]

Exactly! Every "solution" I find on custom loading spinners is to add a fixed timer with a Gif. What terrible solution. Users who have good connections will look at a Gif longer then they need, and users with bad connections will think things are finished loading when they aren't. I hope microsoft adds the option to work with the loading spinner. So far not a single person has acknowledged that their "solutions" are just band aids for a problem they can't solve. 

[seadude]

What about something like this `OnVisible` of the screen where Gallery is shown?

Concurrent(
  Set(varRecordCount, CountRows(DataSource));
  ClearCollect(colAllRecords,
    Filter(DataSource, 
      column1 = "whatever"
    )
  )
)

 And something like this on the `Visible` property of your spinner:

If(
  CountRows(colAllRecords) < varLastRecord,
    true,
  CountRows(colAllRecords) = varLastRecord,
    false
)

This uses no timers.

[vladimir84]

You'll have delegation issues with that.