cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
vladimir84
Advocate III
Advocate III

Loading Spinner while gallery data items are retrieved

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. 

6 REPLIES 6
yashag2255
Dual Super User II
Dual Super User II

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!

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....

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.

  

@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!

@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).

 

@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!

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

Top Solution Authors
Top Kudoed Authors
Users online (29,088)