Json Transform Collection

I store my data as Json in a row. I then have a collection to display this information which is loaded into a table on demand and displayed to the user. This works very well and it only takes about 1 second to load the data.

The problem I’m having is that when the user goes back to the collection page and then clicks on the next element to load it displays the old data for a split-second before loading the new data. This really impacts the user experience negatively.

I have tried everything (conditions, wait, delays etc.) but nothing seems to work to avoid this from happening. Is it perhaps that the old data is being loaded from cache while the new data loads?

Any ideas on how to fix this?

Can you explain more about the JSON loading process?
What triggers it, and what actually happens?

Also, how big is the JSON structure, and how are you unpacking it?
ie. are you using the JQ plugin, or plain JavaScript?

The Json is loaded by an action on the collection i.e. Set Column Values (User Profile) and then the Detail screen is shown. The Json Transform table waits for this value and then loads the Json and transforms it for display.
image

I have used filter data and visibility conditions to only show the detail when the value from the Json Transform Table = the value in the User Profile (from Set Column Values).

I have tried everything I can think of but it does exactly the same thing.

Sorry missed the 2nd part. I’m using Javascript as follows.
image

The Json is about 20 rows x 20 columns. It loads very quick.

I have even added a back button to clear the Json table so it only has blank values before the next action - it does the same thing. Hence why I though it might be loading from cache?

yeah, seems a bit odd. I’ve noticed occasional slow loading times when using the JQ plugin (I avoid it for this reason), but never with plain JavaScript. And certainly not with as few as 20 rows of data.

Are you able to share a sample of the JSON?

But it can’t be the Json because that part works fine. Like I said, I even tried clearing the transform Json table which means when the next action to load new json is triggered the Json table is blank, and there is a condition to only display the detail screen when the data loaded in the Json table is the same as the intended data from the Collection - so where would it then get the old data from if it no longer exists in the Json table?

Yes, I get what you are saying, and I really can’t explain that. Maybe there is some local caching going on :man_shrugging: Do you get the same behaviour in the Glide builder and the published App?

Yes, both inside the builder and when published.

Is there any way to clear cache to see if it resolves this?

Not that I’m aware of, no.

Thanks Darren. Best I could come up with for now is to display a white block for 2 seconds while the collection loads below it - looks better than data changing while the user looks at it.

Might be a good case to use the wait action. Set up a custom action that sets the column values, then waits for 2 seconds before going to the detail screen. Little more elegant than a white block to hide stuff.

doesn’t work - tried everything single delay/hide etc. I could think of. It still displays the old data right before loading the new data.

I can’t help having a niggling feeling that there is something going on here that we’re missing.
Is there any chance you could make a small sample App that reproduces this behaviour, and then make it copyable so that we can take a look and poke it a bit?

I’d also like to see how your actions are set up.

I’ll try and replicate the problem and send a link

How do I share a Pages app with the data so you can see it as a logged in user?

That’s tricky.
Pages Apps can’t be made copyable.
Normally I’d suggest sharing it as a Private Template, but that won’t work at the moment, as there is a bug that prevents templates being copied by non-owners :man_facepalming:

I think the only way is to get the App into a Team that we’re both members of.
If I create a Test Team and PM you an invite link, would you mind moving the App into that team?

Cool that can work. Tx

@Erwin_Potgieter - I finally found some time to take a look at this (apologies for the delay, I’m on vacation at the moment and have been travelling).

Anyway, I’m fairly certain that it’s the images that are causing the delay. If you display the keyword instead of (or in addition to) the image, then the correct keyword always comes up immediately.

My best guess is that it’s the browser that’s caching the image, and there might not be anything that can be done.

I did manage to get some improvement by adding a dummy parameter to the extracted image URL, eg:

That does seem to help a bit. The previous image does appear briefly, but it’s not as bad as it was before:

I’m not sure if that will help with your real world use case, but it might be worth a try :man_shrugging:

@Jeff_Hager - I’ve dropped a copy of the sample App (with my adjustments) in the Glide Labs team, in case you also want to have a poke at it.

2 Likes

@Darren_Murphy thanks for taking a look. I tested it on my live app but makes no difference, probably because there are several images to load. But also - I don’t think the dummy parameter makes any difference because once it’s loaded it is still cached and when the Json is reloaded it has to get rid of the old image first before showing the new image. My current solution (although not ideal) works best - where I just display a white block above the collection for 3 seconds while the collection loads on the screen. So the user doesn’t see the images changing.