Quiero mostrar un modal giratorio en una aplicación vue 3 cuando el precargador de la página obtiene todos los datos del servidor y cuando termina, quiero ocultar el girador.

Mi precargador:

 async preload(to) { Spinner.showSpinner(); let data = await Manager.getFilteredList({ filter: [], order: {}, pageinfo: { pagenum: 1, pagelength: globalVars.EVENT_PER_PAGE }, }).finally(() => Spinner.hideSpinner()); to.params.list= data.list; to.params.totalCount = data.totalcount; return to; }

Spinner.js

 import { Modal as BSModal } from 'bootstrap'; class Spinner { showSpinner() { let modal = BSModal.getInstance(document.getElementById('mdlSpinner')); if (!modal) { modal = new BSModal(document.getElementById('mdlSpinner')); } modal.show(); } hideSpinner() { const modal = BSModal.getInstance(document.getElementById('mdlSpinner')); modal.hide(); } } export default new Spinner();

aplicación.vue

 <template> <div class="home"> <div class="modal" tabindex="-1" id="mdlSpinner"> <div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem" > <span class="visually-hidden">Loading...</span> </div> </div> <div id="login-teleport" /> <Navbar /> <div class="cam-container"> <div class="sidebar"> <Sidemenu /> </div> <div class="content"> <router-view /> <div id="popup-teleport" /> </div> </div> </div> </template>

De esta manera en la página me sale un error:

 TypeError: Illegal invocation at Object.findOne (bootstrap.esm.js:1017) at Modal._showElement (bootstrap.esm.js:2928) at eval (bootstrap.esm.js:2851) at execute (bootstrap.esm.js:275) at eval (bootstrap.esm.js:2557) at execute (bootstrap.esm.js:275) at executeAfterTransition (bootstrap.esm.js:281) at Backdrop._emulateAnimation (bootstrap.esm.js:2627) at Backdrop.show (bootstrap.esm.js:2556) at Modal._showBackdrop (bootstrap.esm.js:3032)

Y también supongo que si funcionara, mi rueda giratoria aún se mostraría porque está codificada permanentemente en App.vue (?). ¿Cuál sería la implementación ideal de un Spinner que podría usar en precargadores y también en plantillas vue, por ejemplo, cuando hago clic en un botón para obtener datos?

¡Gracias por sus respuestas de antemano!