Element: [Feature Request] More documentation/samples on v-loading dynamic close

[ragamuffinguil]

Existing Component

Yes

Component Name

loading

Description

Requesting for more documentation/samples on v-loading dynamic close once page and component is rendered please. thanks.

[element-bot]

Hi, could you provide a reference for this feature / component?

[ragamuffinguil]

in this page i want to make the loading animation automatically close once table is completely rendered.

[a-kriya]

@ragamuffinguil The loading animation can be hidden by setting the loading data property to false. If the table data is loaded remotely, you would do that in the response handler. What exactly do you mean by "completely rendered"? Perhaps try the mounted or updated hook.

[ragamuffinguil]

thanks @syn-zeta, i already tried mounted but loading animation close faster than component rendered completely.

[Leopoldthecoder]

Which component? Please paste your code snippet here.

[ragamuffinguil]

@Leopoldthecoder in element loading component in this example JSfiddle

[Leopoldthecoder]

I meant which component in "loading animation close faster than component rendered completely".

Plus, the fiddle is empty probably because you didn't hit the "Save" button.

[a-kriya]

@ragamuffinguil You could try using $nextTick or a setTimeout() with a timeout of 0 to allow the browser to finish rendering before setting loading to false.

[ragamuffinguil]

@Leopoldthecoder in element table

[ragamuffinguil]

thanks @syn-zeta. but i even also tried settimeout() inside $nextTick but same result, browser already rendered but table component was still rendering. But if i adjust the timeout value to 3000 it may close the animation timely sometimes.(it depends on the table data count).

Here is my sample code inside my vue component.
mounted: function() { this.$nextTick(function() { setTimeout(() => { this.loading = false; }, 3000); }) }

[justlstn]

I had a similar problem. So I used the Loading.service(options) instead of the directive.

[a-kriya]

Are you loading the table data via AJAX? 3 seconds is a lot of time to render some static content.

Besides, the JSFiddle link that you've updated does not demonstrate your issue. I've updated it to load some data via AJAX to try and reproduce what I think you're saying, but cannot: https://jsfiddle.net/5o478690/3/ (the setTimeout is only there to delay the process or else we would not be able to notice the loading spinner).