[Bug]: CarouselSlide - component slow to respond about blazorise HOT 26 CLOSED

I will change the project to show the time each action takes. to make the delay clearer.

from blazorise.

I couldn't reproduce it in a blank project at all. but I found out what's happening (and why it only happens with the carousel).

it's a mix of several things: the fact that the carousel is a RenderFragment of another component, the carosel's Interval property, and the fact that there is no slide available statically.

When I have a slide available statically (without depending on FOREACH), the carousel is displayed immediately, waits for 5 seconds (defined in the Interval property), and then displays the next slide.

but if I don't have this static slide (I completely depend on the rendering of slides by FOREACH), the carousel is invisible for 5 seconds (Interval) and after that time it renders the carosel with the first slide of foreach.

in other words, the delay I was talking about was 2 seconds (default value of the carosel interval), and the fact that the carosel is as a RenderFragment of another component, and has the slides rendered by a foreach. There must be something in the initialization of Carosel that makes it think it is rendering a slide (when in fact, it is not).

from blazorise.

Thanks for reporting it. We'll look into it.

PS. I like your webapp :)

from blazorise.

https://www.streamingdiscovery.com/

This is the production version. But I don't even make money today, I did it more for fun.

from blazorise.

Our carousel demo page does not seem to be having the same problem. It could be a combination of components, configuration or something else, as such we need a reproduceable to troubleshoot the problem.

https://bootstrapdemo.blazorise.com/tests/carousel

from blazorise.

Hello @drma-dev, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

from blazorise.

ok, I'll create a project from scratch and test this. but the problem with the button not responding happens in your demo too.

from blazorise.

I see, that's a separate issue then. I'll go ahead and open an additional issue.

from blazorise.

Hello @drma-dev

Were you able to test the original issue?

from blazorise.

@David-Moreira

https://github.com/drma-dev/SlowCarousel

note: I added the same API that I use, but without the cache feature (because it has a daily limit, so maybe if you use it a lot, you'll need to test it with something else)

from blazorise.

What repro missing means?

https://www.awesomescreenshot.com/video/23835398?key=47e4016b9e1e7ae04d20259f1e3a8b5e

You can clearly see that there is a delay to start.

from blazorise.

Hello,
It means a reproduceable has not been provided, however the label has been removed.

from blazorise.

I just tested. Are you sure this is an issue with Blazorise?
The Carousel slides get rendered when the http call gets done. Same happens on the videos you have sent. The carousel needs to wait for the http call to complete, and to load the images from the urls...

from blazorise.

that's why put it next to a normal image component. they both use the same image.

from blazorise.

I have been using this component for a long time. It wasn't this slow before. some recent version of blazorise left it like this.

from blazorise.

Can I ask from which version to which you find the regression? With the same exact code & http calls?
Thanks!

from blazorise.

idk. but code was the same.

from blazorise.

I provided a project from scratch. the delay is there. the video I recorded was based on it.

from blazorise.

Well there haven't been any significant recent changes that we've made to the Carousel. We haven't introduced any new features or fixes. At least as far as I can recall. I checked the issues and release notes for the newer 1.3 & 1.4 versions I don't see anything relevant.

So it's important to know, and see the same code with the different behaviours between the two versions.

The behavior/speed seems normal to me given the http work that's being done, the images do take a few seconds to load (could they perhaps have been faster to load before), but I might be wrong of course.

from blazorise.

I couldn't find a way to capture an event when a component is rendered. But if you can't see it in your eyes, then I don't have much to do. Maybe when you go to fix the button problem, you'll realize what's wrong.

from blazorise.

It might be far-fetched, but you could try lazy loading the image. This can be done by setting the Loading parameter.

<Image Source="@item?.url_img" title="@item?.title" Text="@item?.title" Loading Display="Display.Block" Width="Width.Is100" />

from blazorise.

Hello @drma-dev

We always have a lot to work on and we can't go in depth to every problem that's reported if not enough information is given or the problem is completely isolated from any 3rd party or possible specific environment issues. Time is a very valuable resource if we want to keep delivering value.

You stated that when upgrading from a certain version to another, you noticed a sudden slow down, we believe you, but we also ask that you provide concrete examples of the issue, before & after(or again, at least the versions where you see the reported regression), so we can quickly get up to speed and help fixing a possible issue.

Like I told you, and again I might be wrong, given the example that you gave us, it's indeed visible that it takes time to show on screen, but it did seem natural to be slower, because there are slow http dependencies. (EDIT: I just saw @stsrki comments, yes that's right, you can try lazy loading or caching the images and see if there's any difference)

For example, we have carousel in both our demo & docs and it works perfectly fine as the images are optimized for size and delivered locally
https://blazorise.com/docs/components/carousel
https://bootstrapdemo.blazorise.com/tests/carousel
In both the apps above, the Carousel should load pretty fast.

from blazorise.

ok, I discovered the problem. It is related to my project and not at the same time.
I created a component to control rendering in which I transform everything into a RenderFragment. I use this throughout the project, but by chance only the carosel is affected. Do you want to analyze this?

from blazorise.

Hello,

We can try helping, specially if it's something that might be to do with the Blazor rendering api and Blazorise interaction and improving it.
But it does seem like you have gotten yourself into a niche case? Anyway we'd need to look at a concrete example. No promises if it's a very niche case with custom code.

from blazorise.

I couldn't reproduce it in a blank project at all.

Well it helps if we have a reproduceable to go ahead & do our own troubleshooting, specially since under normal conditions the Carousel should work as expected I suppose.
Otherwise we are kinda on the dark. We understand that you have done some troubleshooting yourself but we need to be able to troubleshoot & test ourselves.

Would you be able to come up with a reproduceable in a blank project?

As for what you reported, is there somehow you can play with it?

• Setting the interval at a later date for example?
• Only loading / rendering the Carousel when the collection is ready?
• If you have some knowledge of the blazor renderfragment apis, maybe creating through code?

I must admit I'm not sure how the foreach would provoque a different behavior then the static slides here? Then again, this only happens inside your custom control, right?
Is News?.Items being set again? Have you tried a static collection for example(just to be sure)?

from blazorise.

I'm tired of this problem. I'm not going to use my component in Carosel, that's how it works. In the future, if I discover something, I will open it again.

from blazorise.