Data resource not loading and appearing out of order

[Aidan_Jones]

In my app, there’s a data variable, newPhoto. It’s a list of objects whose schema consists of a date, id, and image path.

On a specific page, I have a container housing a image component that’s set to repeat with the formula SORT_BY_KEY(data.newPhoto, "date", "desc").

Users can add photos to this list by selecting a button that has the following logic:

I’m experiencing the following issues:

1. Particular photos not loading
2. The entire list not loading
3. Components loading out of order

The first image below is an example of #1 and 3. In the composer, the “Match your photo…” banner is located below the photos container. When no photos load, there is just a blank space where photos would regularly be.

I tried reducing newPhoto’ s delay rate, but that didn’t work.

I’m at a loss as these seem to happen at random times. Sometimes, it will occur when loading the app. Other times, it will happen after saving a new photo to the database. One idea I had is something to do with async functions not lining up properly? But I’m not sure.

Thank you for your help!

[Aidan_Jones]

Bump. Still would appreciate some help on this as we’re trying to launch pretty soon!

[Aidan_Jones]

Another bump, please help if you can

[Aidan_Jones]

Another bump. If anybody’s out there, please help!

[Mari]

Hi @Aidan_Jones, apologies for the long response time!

If you check the State tab of the debugger, does the image data load correctly each time? What does your data variable logic look like, are you constantly refreshing the photos or just pulling them in once when the app starts up? I think if you are fetching them often, it might confuse things since it also takes a while for the images to load. I would suggest you try to only refresh the newPhoto collection whenever a new picture is added (in case that’s feasible).

When the app works correctly, does it take a while for the images to come up or is it immediate? The photos container being out of place makes me think that it might take such a long time for the image components to load, that the banner just gets placed at the top of the screen.

If you’d like, feel free to share your app ID (found in Composer URL) so we can take a look.

[Aidan_Jones]

Thank you so much for replying!

First, feel free to view the app: 152228

I’ve studied the State tab multiple times in the past attempting to debug this issue. I also looked at it again just now where I was able to reproduce the issue. As far as I can recall, new photos have always successfully added another object to the newPhoto array.

I tried increasing the delay on the newPhoto data variable in the “Variables” view where I was still able to reproduce the problem.

Then I tried disconnecting that logic and refreshing the collection after a new record is created in the photos data resource. This seemed to break the functionality. The flow seems logical to me, but maybe there’s something I’m missing. Perhaps a delay?

When it works, the image does not appear immediately. When it doesn’t, a placeholder space does seem to take it’s place. I think you’re onto something in proposing it’s something to do with loading the photo. If that’s the case, it’s a little concerning because we are releasing on iOS and I’m testing on the fastest iPhone model available. Keeping compatibility in mind when addressing this bug is important.

Thanks again and please let me know if I can provide you with more information.

[Mari]

Hi, the logic you are using looks sound to me, it should work alright if your data variable logic looks like this (the photos collection gets initially populated once, and the delay in the 2nd output takes care that it will be fetched again if the first attempt fails for some reason):

One idea that came to mind is that there is an “Image with loading spinner” view component in the marketplace – using that could help with the rendering issue, since the spinner will be rendered in place of the photo while it’s loading. Setting a defined height and width for the component can also help if you haven’t already.

Thinking of ways to improve the performance – how many photos are you displaying? Does the photos collection have more records than you are displaying, or are they all displayed? (is there any redundancy here?)

While it’s fast, testing with a high-end device might also come with the effect that the camera is also very good and produces large image files, which results in longer load times

[Aidan_Jones]

It seems that the default logic includes another connection between the first output and in the Delay input

I tried copying the format in your screenshot and it broke the functionality.

That component you mentioned is nice in theory; I attempted to create something once like it manually but abandoned it after it became too complex and unpredictable. However, it also doesn’t seem to be working in this context. It just spins forever after a photo is saved.

I am displaying all photos in the collection, but there are usually only 5 max in practice. Photos are only displayed in a horizontal scroll view component. Theoretically, a user could take as many as they wanted. But I assume that after a while, the user will want to use the “Clear Photos” command as it would become unruly to scroll through a long list of photos that way.

I assumed that the photos weren’t that large because of the cropping feature, which seemed to result in visually small images sizes. But I haven’t found a way to actually view the image size or dimensions so I’m not sure. If you have any insight into what the image editor outputs, I’d appreciate hearing it.

[Mari]

Hi, I tried debugging this issue and noticed a bug where image components, when put inside a horizontal scroll view, don’t appear at all – I’ve reported this to the development team.

However, I managed to get it working with the following setup:

Container: Repeated, set width of 200 px (or anything that works for you)
Image: Source set to current.path

Is this similar to what you have?

[Aidan_Jones]

Yes, that is my current setup.

But I have a much bigger issue now. Now, almost all of the buttons don’t work. And the one that does seem to cause any sort of action, a button that triggers the Take Photo function, doesn’t continue with the flow that I screenshotted in an earlier post. That is, tapping the “capture” button doesn’t have any output.

This seems to be a result of the runtime update that I just installed. Is there any way I can downgrade?

[Mari]

Hi, sorry to hear that the update broke your functionality! Which flows are affected and what device are you testing on?

You can use an older runtime by downloading the AG legend app, it’s currently running 1.9.22.

Once building the app in the Build Service, you’ll also be able to choose between various client runtimes:

[Aidan_Jones]

It was the upgrade; the app runs normally on Appgyver Legend.

Yesterday, the Take Photo flow wasn’t working and today it is, for some reason. I can take a photo, crop it, and have it appear in the scroll view at the top.

But it seems that all the Open Page function flows don’t work. My custom nav menus and all other components that have that function don’t work.

[Aidan_Jones]

@Mari or anyone else on the Appgyver team.

I’m still having this issue.

And when trying to compile with the 1.9 runtime, I get the following error:

/Users/ec2-user/.nvm/versions/node/v10.13.0/lib/node_modules/ynpx/node_modules/yargs/build/index.cjs:1
(function (exports, require, module, __filename, __dirname) { "use strict";var t=require("assert");class e extends Error{constructor(t){super(t||"yargs error"),this.name="YError",Error.captureStackTrace(this,e)}}let s,n=[];function i(t,o,a,h){s=h;let l={};if(Object.prototype.hasOwnProperty.call(t,"extends")){if("string"!=typeof t.extends)return l;const r=/\.json|\..*rc$/.test(t.extends);let h=null;if(r)h=function(t,e){return s.path.resolve(t,e)}(o,t.extends);else try{h=require.resolve(t.extends)}catch(e){return t}!function(t){if(n.indexOf(t)>-1)throw new e(`Circular extended configurations: '${t}'.`)}(h),n.push(h),l=r?JSON.parse(s.readFileSync(h,"utf8")):require(t.extends),delete t.extends,l=i(l,s.path.dirname(h),a,s)}return n=[],a?r(l,t):Object.assign({},l,t)}function r(t,e){const s={};function n(t){return t&&"object"==typeof t&&!Array.isArray(t)}Object.assign(s,t);for(const i of Object.keys(e))n(e[i])&&n


Error: yargs supports a minimum Node.js version of 12. Read our version support policy: https://github.com/yargs/yargs#supported-nodejs-versions
    at Object.<anonymous> (/Users/ec2-user/.nvm/versions/node/v10.13.0/lib/node_modules/ynpx/node_modules/yargs/build/index.cjs:1:55356)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/ec2-user/.nvm/versions/node/v10.13.0/lib/node_modules/ynpx/node_modules/yargs/index.cjs:5:30)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)

I never do this, but I I feel like I need to beg.

I’ve been working on two apps for over a year now, running into issue after issue. The client is breathing down our necks to finish these apps.

I’m nervous that if I can’t get a solid build compiled before Appgyver deprecates 1.9, then I at best am looking at a little more dev time, at worst a rewrite from scratch to attempt to fix these issues.

Can someone at AppGyver help me compile a version with 1.9 or fix the open page function flow issue that I referenced in my previous response?

Please, I’m begging you.

[Mari]

Hi @Aidan_Jones, I’m really sorry to hear that you are still struggling with this, we’ll look into it. Do none of the Open page flows still not work if you open the app with the regular preview? If all your flows are up to date (updates installed from the marketplace), there shouldn’t be any reason why basic flows wouldn’t work on the newest runtime, so probably a glitch has happened in the app.

[Aidan_Jones]

@Mari Thank you for replying.

Yes, none of the Open page flows work on the regular preview app.

Not all of the flows are updated; I was hesitant to update more after previous updates had broken our app’s functionality. But none of the flows seem to apply to opening pages as they’re either related to records or photos.

What would be your suggested next steps?

[Aidan_Jones]

@Mari bump, when you get a chance

[Mari]

Hi @Aidan_Jones, @Kristian_Gerkman will look into it today

[Kristian_Gerkman]

Hey @Aidan_Jones, I checked your app, and it looks like you have the page 1 (Capture color) as the initial view, and you are trying to open unauthenticated pages from it - so you have 2 options:

1. set the initial page to be Log in from the Auth tab in composer → Use Dismiss initial view flow function once the user is authenticated to allow navigation to all pages
2. Toggle Allow page to be opened without authentication for the pages that are on the navigation tab menu
   

Please let me know if these work/don’t work! Thanks!

[Aidan_Jones]

Thank you so much @Kristian_Gerkman !! That fixes the pages not opening.

I will now ensure that the rest of the app works on the newer runtime and post here if I encounter any more issues.

[Aidan_Jones]

@Mari @Kristian_Gerkman In my testing, I determined that using “fixed” positioning to put elements behind the title bar and near the app switcher at the bottom of the screen (on notched iPhone X > devices) only worked on runtime 2.6.8.

Home screen of an app in progress compiled using:
2.6.8

2.8.31

I went to compile another version of the app today and it seems like it was removed from the list of available runtimes.

Could somebody please tell me how I can address this using the 2.8.31 runtime or temporarily reenable 2.6.8 so I can correctly compile this app?