Images/Text Loading Twice - Causing Fluttering

Hi there!

Apologies for my lack of functional knowledge when it comes to frontend and using the inspector. I have a UI issue when I refresh the page, the images seem to load twice, causing a flutter effect. It’s not a major issue, but it doesn’t look great. Would greatly appreciate anyone’s advice on this matter!

I have created a video to show the issue → Loom | Free Screen & Video Recording Software | Loom

Here is a screenshot of the Inspector to show in more detail what I am seeing (not sure if I am looking in right area) →

it’s not downloaded twice, it’s a preflight request, something that every browser does in case of a cross origin request

Thank you, @dorilama! I really appreciate it! So this preflight request is what is causing the fluttering effect? Is there a way to avoid this?

it’s not the preflight.
it’s probably something in your layout. I suspect a formula bound to the display of the image. can you share the formula?

@dorilama - Yes it is a formula bound to the URL of the image!

Example Variable Result =
https://xbkp-ju7b-7ewe.n7c.xano.io/vault/OHBidUHY/icwcZZrdSn1_EijtIoL60RhveN8/3Ziy3A../IMG_0800.jpg

anything bound to display or conditional rendering? if not maybe it’s something related to the way the image url is retrieved, like connection fetching or variable setting

Yes! Display is bounded to check if the variable for the image (lesson_kit_assembly.image_1) is empty because there is option to show 5 images but I don’t want there to be the Image viewer showing to user if there is nothing in it.

The logic is below which is checking if lesson_kit_assembly.image_1 variable has a prefix of [https://xbkp-ju7b-7ewe.n7c.xano.io] but nothing following it → “false” and therefore not showing the empty Image Viewer. This is repeated for lesson_kit_assembly.image_1, image_2, image_3, image_4, image_5.

Logic = “if(variables[‘eca2cb7c-a1d6-4cee-8727-c510436a2b6d’]?.[‘image_1’] == “https://xbkp-ju7b-7ewe.n7c.xano.io”, false , true)”

“has prefix of” is not ==, you need to use the code yourStringVariable.startsWith('start-with-this')

your expression means if variable is exactly this string then false, else true

Sorry I didn’t make this clearer! “[https://xbkp-ju7b-7ewe.n7c.xano.io](https://xbkp-ju7b-7ewe.n7c.xano.io/]” prefix is in every lesson_kit_assembly.image_X variable as their is backend SQL that is concateniaing that with the image URL (if it exists). Hope this makes more sense, my apologies again!

I don’t think it has to with the display binding since I just tested with removing all the binds (set display = “block”) but still is fluttering :melting_face:

I think root cause was on page load was fetching collection again which was causing images to reload and the flutter as result

1 Like