From e52085e74b7b368592627b4d2785172c46318a84 Mon Sep 17 00:00:00 2001
From: Frido Emans <verderster@gmail.com>
Date: Sat, 29 Oct 2022 11:54:41 +0200
Subject: [PATCH] Happy logo spinner (#238)

---
 .../detailViewComponents/ImageDetail.vue      |  5 ++---
 .../searchViewComponents/BaseList.vue         |  3 ++-
 .../searchViewComponents/ImageList.vue        |  5 ++---
 src/components/shared/imageSpinner.vue        | 19 +++++++++++++++++++
 4 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/components/shared/imageSpinner.vue

diff --git a/src/components/detailViewComponents/ImageDetail.vue b/src/components/detailViewComponents/ImageDetail.vue
index c300df4d..2ac3777c 100644
--- 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
index fe97eb96..36110669 100644
--- 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
index c0856c85..342788d9 100644
--- 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
new file mode 100644
index 00000000..1cca0754
--- /dev/null
+++ 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>