Q-spinner consumes CPU even when invisible

[SaleCar]

Hello,

I have an Q-spinner in the toolbar to show when the content is loading but when the spinner is inactive, it still consumes cpu resources.

What is the best way to implement a spinner so that the animation does not consume cpu resources if it is not visible?

Here’s what I tried and it didn’t help:

<div :hidden="!loading">
    <q-spinner-oval color="primary" size="2em" />
</div>

<q-spinner-oval 
    :class="{ invisible : !loading }" 
    color="primary" 
    size="2em" 
/>

<q-spinner-oval 
    :class="{ hidden : !loading }" 
    color="primary" 
    size="2em" 
/>

[metalsadman]

@salecar try using v-if as it destroys the component and recreates it depending on the boolean. ie.

<q-spinner-oval 
    v-if="loading"
    color="primary" 
    size="2em" 
/>

[SaleCar]

Thanks, it works!