fix

ios/App/App/Info.plist

@@ -73,6 +73,8 @@
     <key>LSApplicationQueriesSchemes</key>
     <array>
       <string>mailto</string>
+      <string>googlegmail</string>
+      <string>ms-outlook</string>
     </array>
   </dict>
 </plist>

src/app/decks/inbox/pages/InboxDeckPage.vue

@@ -6,6 +6,10 @@
         <ion-title>
           {{ $t('decks.inbox.title') }}
         </ion-title>
+
+        <ion-buttons slot="primary">
+          <BackgroundTasks />
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
@@ -51,9 +55,9 @@
 
 <script lang="ts" setup>
 import { InboxCard, InboxCardMemorized, UpdateVerseStatus, Verse, VerseId } from '@akdasa-studios/shlokas-core'
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, onIonViewDidLeave } from '@ionic/vue'
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, onIonViewDidLeave, IonButtons } from '@ionic/vue'
 import { computed, ref, reactive, watch } from 'vue'
-import { testId , useApplication } from '@/app/shared'
+import { testId , useApplication , BackgroundTasks } from '@/app/shared'
 import { InboxFlipCard, InboxCardSwipeOverlay, InboxDeckEmpty } from '@/app/decks/inbox'
 import { useLibraryCache, useIndexedList, StackedFlipCardsDeck } from '@/app/decks/shared'
 import { useTutorialStore, TutorialSteps } from '@/app/tutorial'

src/app/decks/review/pages/ReviewDeckPage.vue

@@ -6,6 +6,9 @@
         <ion-title>
           {{ $t('decks.review.title') }}
         </ion-title>
+        <ion-buttons slot="primary">
+          <BackgroundTasks />
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
@@ -62,15 +65,15 @@
 
 <script lang="ts" setup>
 import { ReviewCard, ReviewCardReviewed, ReviewGrade, Scheduler, UpdateVerseStatus, Verse, VerseId } from '@akdasa-studios/shlokas-core'
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter } from '@ionic/vue'
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, IonButtons } from '@ionic/vue'
 import { computed, reactive, ref, watch } from 'vue'
 import { useArrayFind } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { StackedFlipCardsDeck , useIndexedList, useLibraryCache } from '@/app/decks/shared'
 import { ReviewFlipCard, ReviewDeckEmpty, ReviewCardSwipeOverlay, GradeCardButtons } from '@/app/decks/review'
 import { useSettingsStore } from '@/app/settings'
 import { TutorialSteps, useTutorialStore } from '@/app/tutorial'
-import { useApplication } from '@/app/shared'
+import { useApplication , BackgroundTasks } from '@/app/shared'
 
 
 /* -------------------------------------------------------------------------- */

src/app/home/components/HomePage.vue

@@ -61,11 +61,6 @@
     <TutorialPlayer
       v-if="tutorialEnabled && !isTutorialCompleted"
     />
-
-    <ion-loading
-      :is-open="syncTask.inProgress.value"
-      :message="$t('sync.syncing')"
-    />
   </ion-page>
 </template>
 
@@ -74,7 +69,6 @@
 import {
   IonTabBar, IonTabButton, IonTabs, IonLabel,
   IonIcon, IonPage, IonRouterOutlet, IonBadge,
-  IonLoading
 } from '@ionic/vue'
 import {
   enterOutline, libraryOutline, albumsOutline,
@@ -83,15 +77,13 @@ import {
 import { storeToRefs } from 'pinia'
 import { useStatisticsStore } from '@/app/statistics'
 import { TutorialPlayer, useTutorialStore } from '@/app/tutorial'
-import { useSync } from '@/app/shared'
 
 /* -------------------------------------------------------------------------- */
 /*                                Dependencies                                */
 /* -------------------------------------------------------------------------- */
 
 const statisticsStore = useStatisticsStore()
 const tutorialStore = useTutorialStore()
-const syncTask = useSync()
 
 /* -------------------------------------------------------------------------- */
 /*                                    State                                   */

src/app/library/composables/useLoadLibraryIntoMemory.ts

@@ -1,36 +1,38 @@
 import { Application, Language, Synonym, Text, Translation, Verse, VerseId, VerseNumber } from '@akdasa-studios/shlokas-core'
 import { ref } from 'vue'
 
+const inProgress = ref(false)
 
 export function useLoadLibraryIntoMemory(
   app: Application,
   libraryDatabase: any
 ) {
-  const inProgress = ref(false)
-
   async function sync() {
     inProgress.value = true
-    const docs: any = await libraryDatabase.db.find({ selector: { '@type': 'verse' }})
+    try {
+      const docs: any = await libraryDatabase.db.find({ selector: { '@type': 'verse' } })
 
-    for (const verse of docs.docs) {
-      const synonyms = []
-      for (const w of verse.synonyms) {
-        synonyms.push(new Synonym(w.words.join(' '), w.translation, w.lineNumber))
-      }
+      for (const verse of docs.docs) {
+        const synonyms = []
+        for (const w of verse.synonyms) {
+          synonyms.push(new Synonym(w.words.join(' '), w.translation, w.lineNumber))
+        }
 
-      const v = new Verse(
-        new VerseId(verse._id),
-        new VerseNumber(verse.number),
-        verse.reference,
-        new Language(verse.language, verse.language),
-        new Text(verse.text),
-        new Translation(verse.translation),
-        synonyms
-      )
+        const v = new Verse(
+          new VerseId(verse._id),
+          new VerseNumber(verse.number),
+          verse.reference,
+          new Language(verse.language, verse.language),
+          new Text(verse.text),
+          new Translation(verse.translation),
+          synonyms
+        )
 
-      await app.repositories.verses.save(v)
+        await app.repositories.verses.save(v)
+      }
+    } finally {
+      inProgress.value = false
     }
-    inProgress.value = false
   }
 
   return { sync, inProgress }

src/app/library/composables/useSyncLibraryTask.ts

@@ -6,13 +6,13 @@ export interface SyncOptions {
   showProgress: boolean
 }
 
+const inProgress = ref(false)
 
 export function useSyncLibraryTask(
   libraryDatabase: any
 ) {
   const env = useEnv()
   const logger = new Logger('init')
-  const inProgress = ref(false)
 
   async function sync(options?: SyncOptions) {
     try {
@@ -24,8 +24,9 @@ export function useSyncLibraryTask(
       logger.debug('Library synced')
     } catch (err) {
       logger.error('Failed to sync static data', err)
+    } finally {
+      inProgress.value = false
     }
-    inProgress.value = false
   }
 
   return { sync, inProgress }

src/app/library/index.ts

@@ -10,6 +10,7 @@ export { default as VersesList } from './components/VersesList.vue'
 export { default as VersesListItem } from './components/VersesListItem.vue'
 export * from './composables/useSyncLibraryTask'
 export * from './composables/useLoadLibraryIntoMemory'
+export * from './composables/useSyncLibraryTask'
 
 // routes
 export * from './routes/library'

src/app/library/pages/LibraryPage.vue

@@ -3,6 +3,9 @@
     <ion-header>
       <ion-toolbar>
         <ion-title>{{ $t('library.title') }}</ion-title>
+        <ion-buttons slot="primary">
+          <BackgroundTasks />
+        </ion-buttons>
       </ion-toolbar>
 
       <ion-toolbar>
@@ -27,29 +30,23 @@
         :verse-statuses="verseStatuses"
       />
     </ion-content>
-
-    <ion-loading
-      :is-open="syncLibraryTask.inProgress.value"
-      message="Loading verses..."
-      duration="3500"
-    />
   </ion-page>
 </template>
 
 
 <script lang="ts" setup>
 import { Language, Verse, VerseStatus } from '@akdasa-studios/shlokas-core'
 import {
-  IonContent, IonHeader, IonPage, IonLoading, IonRefresher, IonRefresherContent,
-  IonSearchbar, IonTitle, IonToolbar, onIonViewWillEnter
+  IonContent, IonHeader, IonPage, IonRefresher, IonRefresherContent,
+  IonSearchbar, IonTitle, IonToolbar, onIonViewWillEnter, IonButtons
 } from '@ionic/vue'
 import { inject, ref, shallowRef, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { IonRefresherCustomEvent, RefresherEventDetail } from '@ionic/core'
 import { useLoadLibraryIntoMemory, useSyncLibraryTask, VersesList } from '@/app/library'
 import { useSettingsStore } from '@/app/settings'
 import { TutorialSteps, useTutorialStore } from '@/app/tutorial'
-import { useApplication } from '@/app/shared'
+import { useApplication, BackgroundTasks } from '@/app/shared'
 
 /* -------------------------------------------------------------------------- */
 /*                                Dependencies                                */

src/app/settings/pages/AccountPage.vue

@@ -5,6 +5,11 @@
         <ion-buttons slot="start">
           <ion-back-button />
         </ion-buttons>
+
+        <ion-buttons slot="primary">
+          <BackgroundTasks />
+        </ion-buttons>
+
         <ion-title>{{ $t('settings.account') }}</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -86,7 +91,7 @@ import {
 import { mail, logoApple, logoGoogle } from 'ionicons/icons'
 import { computed, inject } from 'vue'
 import { Capacitor } from '@capacitor/core'
-import { go, useAuthentication, useEmitter, useSync } from '@/app/shared'
+import { go, useAuthentication, useEmitter, useSync , BackgroundTasks } from '@/app/shared'
 import { useSettingsStore } from '@/app/settings'
 import { CouchDB } from '@/services/persistence'
 

src/app/settings/pages/SettingsPage.vue

@@ -6,6 +6,10 @@
     >
       <ion-toolbar>
         <ion-title>{{ $t('settings.title') }}</ion-title>
+
+        <ion-buttons slot="primary">
+          <BackgroundTasks />
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
@@ -89,12 +93,13 @@
 <script lang="ts" setup>
 import {
   IonContent, IonHeader, IonItem, IonLabel, IonList,
-  IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar
+  IonPage, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar,
+  IonButtons
 } from '@ionic/vue'
 import { inject, ref } from 'vue'
 import { EmailComposer } from '@awesome-cordova-plugins/email-composer'
 import { useSettingsStore } from '@/app/settings'
-import { getAvailableLanguages, useClearCache } from '@/app/shared'
+import { BackgroundTasks, getAvailableLanguages, useClearCache } from '@/app/shared'
 
 /* -------------------------------------------------------------------------- */
 /*                                Dependencies                                */

src/app/shared/components/BackgroundTasks.vue

@@ -0,0 +1,34 @@
+<template>
+  <ion-spinner
+    v-if="visible"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { IonSpinner } from '@ionic/vue'
+import { useLoadLibraryIntoMemory, useSyncLibraryTask } from '@/app/library'
+import { useSync } from '../composables/useSync'
+import { useApplication } from '../composables/useApp'
+
+/* -------------------------------------------------------------------------- */
+/*                                Dependencies                                */
+/* -------------------------------------------------------------------------- */
+
+const application = useApplication()
+const libraryDatabase = inject('verses')
+const syncTask = useSync()
+const syncLibraryTask = useSyncLibraryTask(libraryDatabase)
+const loadLibrary = useLoadLibraryIntoMemory(application.instance(), libraryDatabase)
+
+
+/* -------------------------------------------------------------------------- */
+/*                                    State                                   */
+/* -------------------------------------------------------------------------- */
+
+const visible = computed(() =>
+  syncTask.inProgress.value
+  || syncLibraryTask.inProgress.value
+  || loadLibrary.inProgress.value
+)
+</script>

src/app/shared/index.ts

@@ -18,4 +18,5 @@ export * from './tasks/runSyncTask'
 // components:
 export { default as ConfettiExplosion } from './components/ConfettiExplosion.vue'
 export { default as VerseAudioPlayer } from './components/VerseAudioPlayer.vue'
-export { default as DarkImage } from './components/DarkImage.vue'
+export { default as DarkImage } from './components/DarkImage.vue'
+export { default as BackgroundTasks } from './components/BackgroundTasks.vue'