I want to show a spinner modal in a vue 3 app when the page preloader gets all the data from the server and when it finishes I want to hide the spinner.

My preloader:

  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();

App.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>

This way on the page I get an 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)

And also I guess if it would even work my spinner would still show because it is permanently coded into App.vue (?). What would be the ideal implementation of a Spinner which I could use in preloaders and also in vue templates - for example when I click on a button to fetch data.

Thank you for your answers in advance!