Wappler Takes 20 Seconds To Display Image in Conditional Region

Wappler General How To
#1

I have a repeat which displays a database table called file_descriptions. This is a record of images stored in my S3 storage. It looks like this:

images

so the general format of the repeat part of the code is like this:

repeat file_descriptions
   variable show_image
   display of file_title
   [Show Image] icon to display the image - sets show_image=1
   display of file_url
   conditional_region viewed when show_image.value==1
       image tag with src taken from file_descriptions

When I click on the [Show Image] icon, it immediately displays the conditional region but then takes about 20 seconds before it goes off to download the image from the url and display it. The actual image download then only takes a few hundred ms and the image appears.

Is this a bug, a feature, or am I doing something wrong?

I am using a conditional_region rather than show/hide because I don’t want to download all the images… only the one or two the user wants to actually view.

Here is the source code of the conditional region:

<div id="c_search_show_image" is="dmx-if" dmx-bind:condition="show_image.value == 1">
	<div class="row mb-2">
	<div class="col-auto">
		<p dmx-show="file_type == 'i'" class="invisible"><i class="fas fa-image"></i></p>
	</div>
	<div class="align-self-center p-2 b_right3 rc_5 col-auto">
		<div class="row justify-content-end">
			<div class="col-auto px-2">
				<p class="view_right" dmx-on:click="show_image.setValue(0)"><i class="fas fa-times"></i></p>
			</div>
		</div>
		<img dmx-bind:src="file_url" style="max-width:500px;max-height:500px;">
	</div>
</div>

Here is how it looks when I am waiting…

waiting
waiting1328×605 54.6 KB

And here is how it looks when the image finally downloads…

slow
slow1245×629 76.6 KB

#2

Try using separated pages. If you have millions of Dynamic expressions on the page that are not boxed in conditional regions they will. E evaluated over and over again on each change.

So having a SPA with dynamic content views or separate pages is a much better solution

#3

Thanks for your input @George!

It is true that there are areas of my app where a lot is going on, (I dispute the “millions” statement!) but those pages had not been populated with any data when the problem I am having occurs.

I know my app very well, and everything else on the page I’m dealing with displays immediately, so I am still very confused about why Wappler takes soooo long just to decide to go off and display the image. Can you or @patrick help me to understand that?

(I would say having one page or lots of pages is a topic for another post. I’d love to hear the team and community’s view on the pros and cons of each approach, as no one method is ever utopia!)

#4

Well try to isolate the problem by using it on a stand alone page.

#5

Well I’ve isolated it in terms of using show/hide instead of a conditional region.

With show/hide, the files download instantly and are available to view instantly.

There is something wrong with the conditional region where it is taking soooo long to decide to go off and download the image.

(However I don’t want to use show/hide as I do not want to waste bandwidth having all the files downloaded unnecessarily)

#6

I’m not sure why you’re seeing such a delay, but a different approach for displaying ‘conditional’ images is suggested here. I’m not sure if it will work with images hosted on Amazon; I expect it could.

#7

Thanks for the idea @TomD!

That wouldn’t work as I’m not going out to a server connect at that moment and all the files do exist already on S3.

#8

My knowledge of the inner workings of Wappler are extremely limited, but my experience has been that when I think “Thing A” is causing a performance issue, what is really happening is that the Overall Page Performance has degraded, and it is just being exposed by Thing A.

I’ve also had good luck moving formatting to the server when possible – the client side formatters seem to run constantly so when there are hundreds of elements, issues arise. Again, just my experience, not any secret inside knowledge of Wappler – so keep that in mind!

#9

Yes Ken, that makes a lot of sense… and I do experience that when there is complex code displaying a lot of data.

But in this case, the whole app is running like clockwork, super smooth, until it comes to the conditional region displaying the image. To go from 100ms to 20 seconds for something to be displayed is such a massive difference, and is only when use the conditional region, it leads me to believe that something strange is going on with Wappler!

That sounds like a great plan I hadn’t thought of for some other issues I have had, so I will bear that idea in mind. Thanks! :slight_smile:

#10

This confuses me. Are you saying that Wappler is the issue?

#11

Well I can’t find any other explanation right now!

#12

This is sort of like saying: my hammer caused the nail to go in crooked! :rofl:

Sorry, I could not resist. I do not mean malice and you could be right.

1 Like
#13

It could be that this CR is turning out to be the next dynamic component that would overflow DMX - hence degrading the performance.
Just to test, maybe add a CR somewhere else on the page and see if that breaks the performance too?

#14

Folks, Thanks for your input and your sense that it must be my app and not Wappler.

I’m open to all ideas!

What I can say is that the app still runs perfectly okay at normal speed after this happens. And all works speedily if I use show/hide, and that causes all the images to download.

Hence my belief something strange is happening with the CR!