Ionic Vue: How to dismiss the Ion-Loader after data is ready?

Logic seems correct however the data process first before the spinner executes??
Composable

useIonic.ts

// import { ref } from 'vue';
import { loadingController } from '@ionic/vue';

export const useIonic = () => {
  return {
    showLoader,
    hideLoader
    
  }
}
async function showLoader  (
    cssClass= 'loading-custom-class',
    message = 'Please wait...', 
    duration = 0 ,
    translucent = false,
    backdropDismiss = false,
    spinner: any,

):  Promise<void>{
    const loading = await loadingController
    .create({
        cssClass,
        message,
        translucent,
        backdropDismiss,
        spinner,
        duration,
        // keyboardClose: true
    })
    // Show loader
    console.log('show loader')
    await loading.present();
}

async function hideLoader ():  Promise<void> {
  console.log('hideLoader called')
    await loadingController
    .dismiss().then((response) => {
        console.log('Loader closed!', response);
    }).catch((err) => {
        console.log('hideLoader Error occured : ', err);
    });
  
}

Store

import { defineStore } from 'pinia'
import { RegisterData } from '@/components/models'

export const authStore = defineStore({
  id: 'authStore',
  state() {
    return {
      users: [],
      currentUser: null
    }
  },
  getters: {},
  actions: {
    async addUser(payload: RegisterData) {
      
      await this.users.push(payload)
      return true
      
    },
    // removeUser () {}
  }
})



**Vue File Setup**
const onSubmit = (values: RegisterData, { resetForm }: any): void => {
      showLoader (
        'loading-custom-class',
        'Loading please wait...', 
        4000 ,
        false,
        false,
        'dots',
      )

      try {
          auth.addUser(values).then((response: boolean): void => {
            if (response) hideLoader()
          })
         
          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
          resetForm()
      } catch (error) {
          console.log('Login Error')
      }
    }

1 post - 1 participant

Read full topic