Adds a spinner modal

lib/components/ms-modal/MsSpinnerModal.vue

@@ -0,0 +1,26 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <ms-modal :close-button="{ visible: false }">
+    <ion-text
+      v-if="label"
+      class="subtitles-normal spinner-label__text"
+    >
+      {{ $msTranslate(label) }}
+    </ion-text>
+    <ms-spinner />
+  </ms-modal>
+</template>
+
+<script setup lang="ts">
+import MsModal from '@lib/components/ms-modal/MsModal.vue';
+import { Translatable } from '@lib/services';
+import MsSpinner from '@lib/components/ms-spinner/MsSpinner.vue';
+import { IonText } from '@ionic/vue';
+
+defineProps<{
+  label?: Translatable;
+}>();
+</script>
+
+<style lang="scss" scoped></style>

lib/components/ms-modal/utils.ts

@@ -3,6 +3,7 @@
 import { modalController } from '@ionic/vue';
 import MsPasswordInputModal from '@lib/components/ms-modal/MsPasswordInputModal.vue';
 import MsQuestionModal from '@lib/components/ms-modal/MsQuestionModal.vue';
+import MsSpinnerModal from '@lib/components/ms-modal/MsSpinnerModal.vue';
 import MsTextInputModal from '@lib/components/ms-modal/MsTextInputModal.vue';
 import { GetPasswordOptions, GetTextOptions, MsModalResult } from '@lib/components/ms-modal/types';
 import { Answer } from '@lib/components/ms-types';
@@ -90,3 +91,18 @@ export async function getTextFromUser(options: GetTextOptions): Promise<string |
   await modal.dismiss();
   return result.role === MsModalResult.Confirm ? result.data : null;
 }
+
+export async function openSpinnerModal(label?: Translatable): Promise<HTMLIonModalElement> {
+  const modal = await modalController.create({
+    component: MsSpinnerModal,
+    canDismiss: true,
+    backdropDismiss: false,
+    showBackdrop: true,
+    cssClass: 'ms-spinner-modal',
+    componentProps: {
+      label: label,
+    },
+  });
+  await modal.present();
+  return modal;
+}

lib/theme/components/modals.scss

@@ -105,3 +105,24 @@ ion-modal .inner-content {
     padding-bottom: 0rem !important;
   }
 }
+
+.ms-spinner-modal {
+  &::part(content) {
+    min-width: 25rem;
+    width: 25rem;
+  }
+
+  .ms-modal {
+    padding: 1.5rem;
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+    }
+  }
+  .spinner-label__text {
+    color: var(--parsec-color-light-secondary-soft-text);
+  }
+}

src/locales/en-US.json

@@ -125,7 +125,9 @@
         "age": "Age"
       },
       "spinner": {
-        "title": "Spinner"
+        "title": "Spinner",
+        "openModal": "Open modal",
+        "modalLabel": "Please wait..."
       },
       "stepper": {
         "title": "Stepper"

src/locales/fr-FR.json

@@ -125,7 +125,9 @@
         "age": "Âge"
       },
       "spinner": {
-        "title": "Spinner"
+        "title": "Spinner",
+        "openModal": "Ouvrir la modal",
+        "modalLabel": "Veuillez patienter..."
       },
       "stepper": {
         "title": "Stepper"

src/views/HomePage.vue

@@ -241,6 +241,10 @@
           <ion-label class="title-h2">{{ $msTranslate('usage.components.spinner.title') }}</ion-label>
           <div class="example-divider-content">
             <ms-spinner title="lib.components.msSpinner.loading" />
+
+            <ion-button @click="openSpinnerModal">
+              {{ $msTranslate('usage.components.spinner.openModal') }}
+            </ion-button>
           </div>
         </div>
 
@@ -465,6 +469,7 @@ import {
   MsProgressBar,
   MsSummaryCard,
   createSummaryCardItem,
+  openSpinnerModal as msOpenSpinnerModal,
 } from '@lib/components';
 import { DateTime } from 'luxon';
 import { inject, ref, Ref, onMounted } from 'vue';
@@ -589,6 +594,14 @@ async function openSettingsModal(): Promise<void> {
   await modal.dismiss();
 }
 
+async function openSpinnerModal(): Promise<void> {
+  const modal = await msOpenSpinnerModal('usage.components.spinner.modalLabel');
+
+  setTimeout(async () => {
+    await modal.dismiss();
+  }, 2000);
+}
+
 async function openAlertModal(): Promise<void> {
   const modal = await modalController.create({
     component: MsAlertModal,