Happy logo spinner (#238)

ipfs-search · Oct 29, 2022 · e52085e · e52085e
1 parent 4572018
commit e52085e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/components/detailViewComponents/ImageDetail.vue b/src/components/detailViewComponents/ImageDetail.vue
@@ -6,6 +6,7 @@ import getResourceURL from "@/helpers/resourceURL";
 
 import GenericDetail from "@/components/detailViewComponents/GenericDetail.vue";
 import { useBlurExplicit } from "@/composables/BlurExplicitImagesComposable";
+import ImageSpinner from "@/components/shared/imageSpinner.vue";
 const { blurExplicit } = useBlurExplicit();
 </script>
 
@@ -22,9 +23,7 @@ const { blurExplicit } = useBlurExplicit();
           :class="{ blurExplicit: blurExplicit(file) }"
         >
           <template #placeholder>
-            <v-row class="fill-height ma-0" align="center" justify="center">
-              <v-progress-circular indeterminate color="ipfsPrimary" />
-            </v-row>
+            <image-spinner />
           </template>
           <NsfwTooltip :file="file" />
         </v-img>

diff --git a/src/components/searchViewComponents/BaseList.vue b/src/components/searchViewComponents/BaseList.vue
@@ -12,6 +12,7 @@ import { batchSize, maxPages } from "@/helpers/ApiHelper";
 import { useDisplay } from "vuetify";
 import { useStore } from "vuex";
 const store = useStore();
+import ImageSpinner from "@/components/shared/imageSpinner.vue";
 
 const route = useRoute();
 const { smAndDown, smAndUp } = useDisplay();
@@ -183,7 +184,7 @@ const queryPage = computed({
     </v-row>
 
     <v-row v-if="loading" dense justify="center">
-      <v-progress-circular color="ipfsPrimary" indeterminate />
+      <image-spinner />
     </v-row>
     <!--     PAGINATION -->
     <!-- TODO: pagination panel falls behind social media bar without margin-bottom -->

diff --git a/src/components/searchViewComponents/ImageList.vue b/src/components/searchViewComponents/ImageList.vue
@@ -6,6 +6,7 @@ import TileList from "@/components/searchViewComponents/TileList.vue";
 import { imports } from "@/composables/useFileListComposable";
 import { useBlurExplicit } from "@/composables/BlurExplicitImagesComposable";
 import { Types } from "@/helpers/typeHelper";
+import ImageSpinner from "@/components/shared/imageSpinner.vue";
 
 const fileType = Types.images;
 
@@ -26,9 +27,7 @@ const { blurExplicit } = useBlurExplicit();
           :data-nsfw="hit.nsfw"
           class="rounded grey lighten-2"
         >
-          <template #placeholder>
-            <v-row class="fill-height ma-0" align="center" justify="center"> </v-row>
-          </template>
+          <template #placeholder> <image-spinner /></template>
           <NsfwTooltip :file="hit" />
         </v-img>
       </hover-card>

diff --git a/src/components/shared/imageSpinner.vue b/src/components/shared/imageSpinner.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-row class="fill-height ma-0" align="center" justify="center">
+    <v-img class="spinner" src="/assets/logo-hexagon-black.png" />
+  </v-row>
+</template>
+
+<style scoped>
+.spinner {
+  width: 50%;
+  height: 50%;
+  max-width: 120px;
+  animation: spin 4s linear infinite;
+}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>