Add proper loading indicator for monochrome

AndBible · Jan 1, 2025 · 14e5e61 · 14e5e61
1 parent d816a83
commit 14e5e61
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/app/bibleview-js/package-lock.json b/app/bibleview-js/package-lock.json
diff --git a/app/bibleview-js/package.json b/app/bibleview-js/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "~6.5.2",
     "@fortawesome/free-solid-svg-icons": "~6.5.2",
+    "@fortawesome/free-regular-svg-icons": "~6.5.2",
     "@fortawesome/vue-fontawesome": "~3.0.6",
     "@vue/runtime-core": "~3.4.23",
     "color": "~4.2.3",

diff --git a/app/bibleview-js/src/components/BibleView.vue b/app/bibleview-js/src/components/BibleView.vue
@@ -40,7 +40,12 @@
       <div class="bottom-right-corner"/>
     </div>
     <div id="top"/>
-    <div class="loading" v-if="isLoading"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>
+    <div class="loading" v-if="isLoading">
+      <div v-if="appSettings.disableAnimations" class="loading-icon">
+        <FontAwesomeIcon size="2x" icon="fa-regular fa-clock"/>
+      </div>
+      <div v-else class="lds-ring"><div/><div/><div/><div/></div>
+    </div>
     <div id="content" ref="topElement" :style="contentStyle">
       <div style="position: absolute; top: -5000px;" v-if="documents.length === 0">Invisible element to make fonts load properly</div>
       <DocumentBroker v-for="document in documents" :key="document.id" :document="document"/>
@@ -98,6 +103,7 @@ import {useCustomFeatures} from "@/composables/features";
 import {useSharing} from "@/composables/sharing";
 import {AnyDocument, BibleViewDocumentType} from "@/types/documents";
 import AmbiguousSelection from "@/components/modals/AmbiguousSelection.vue";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 
 console.log("BibleView setup");
 useAddonFonts();
@@ -356,6 +362,14 @@ $ring-thickness: calc(#{$ring-size} / 12);
   top: calc(50% - #{$ring-size} / 2);
 }
 
+.loading-icon {
+  border-radius: 50%;
+  background: white;
+  .night & {
+    background: black;
+  }
+}
+
 $ring-color: $button-grey;
 
 .lds-ring {
@@ -374,9 +388,6 @@ $ring-color: $button-grey;
     border: $ring-thickness solid $ring-color;
     border-radius: 50%;
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    .noAnimation & {
-      animation: none; // TODO: better loading indicator for noAnimation
-    }
     border-color: $ring-color transparent transparent transparent;
 
     &:nth-child(1) {

diff --git a/app/bibleview-js/src/composables/fontawesome.ts b/app/bibleview-js/src/composables/fontawesome.ts
@@ -49,6 +49,10 @@ import {
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 
+import {
+    faClock
+} from "@fortawesome/free-regular-svg-icons";
+
 export function useFontAwesome() {
     const customWholeVerseFalse: IconDefinition = {
         prefix: 'fas',
@@ -112,5 +116,6 @@ export function useFontAwesome() {
         faHandPointer,
         faSave,
         faCheck,
+        faClock,
     );
 }