IonSpinner not rendering on real device

Hello,

I have recently added a loading icon via the IonSpinner component from Ionic. This works great on web and on iPhone/ iPad simulators. But when I send the app to test flight and test the app on real device, the spinner is not rendered.

Any idea what can happen here?

You are going to need to share some code of how you implemented it. Better yet, create a minimal reproduction of the issue so that we can easily help you.

Hey @twestrick, thanks for replying.

Here’s a piece of code to explain the problem. I’m not sure how to create a minimal reproduction of the issue. I have done a few more tests and it’s so strange. The spinner works on local + on local simulator. But I also get it to work on iPhone 13 via Test Fly, when it’s not working on iPhone XR and iPad 9 …

Not sure what is so different between these devices.

Here’s the code:

<script setup>
import {ref} from "vue";
import {IonSpinner} from "@ionic/vue";
const loading = ref(false)

const showLoading = () => {
loading.value = true;
}

</script>

<template>

<button @click="showLoading">Show the loading in the button</button>

<button @click="makePurchase" class="validatePlan">
      <IonSpinner v-if="loading"></IonSpinner>
      <div v-else>Start my 3 days trial<br /></div>
 </button>


</template>


So basically, if I click on button “Show the loading on the button”, the ref loading change to true and then the other button that is suppose to contain the loading spinner just goes to white.

I’m not sure if it’s being in a button, or if it is the fact that it’s rendered after the loading of the parent component. What’s bugging me is that it’s randomly working depending devices.

Thanks for your help.

Have you tried a v-show instead of a v-if? It’s possible it’s being wonky being added and removed from the DOM with v-if.

That’s a good idea, I just tried it and had no luck. It’s actually the same result, meaning on each device (or situation) where it was not working, it’s not working either.

I have gone another route, and just use text instead of the spinner as I have to do a release soon. But I’ll keep trying to find a solution for the next release.

It might come from the fact it’s in a button button.

Thanks for your help.

I use IonIcon and CSS for our loading animation. I’ve extracted it out to it’s own component for reuse. See below. No idea if it has the same problems but haven’t heard of any issues.

SavingSpinnerText.vue

<template>
    <div v-show="isSaving" class="flex items-center justify-center">
        <IonIcon class="animate-spin" :icon="syncOutline" />
        <div class="ml-1">
            <slot name="savingText" />
        </div>
    </div>
    <span v-show="!isSaving">
        <slot name="normalText" />
    </span>
</template>

<script lang="ts" setup>
import { IonIcon } from '@ionic/vue'
import { syncOutline } from 'ionicons/icons'

defineProps<{
    isSaving: boolean
}>()
</script>

Usage with IonButton

<IonButton
    expand="block"
    :disabled="isConfirming"
    @click="handleConfirm"
>
    <SavingSpinnerText :is-saving="isConfirming">
        <template #savingText>Confirming&hellip;</template>
        <template #normalText>Confirm email</template>
    </SavingSpinnerText>
</IonButton>

I am using TailwindCSS so the class animate-spin is as follows:

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}