meow

app/src/App.vue

@@ -115,7 +115,7 @@ export default {
   },
 
   // This hook is only triggered at page first load
-  async created () {
+  created () {
     // From this hook the value of `connected` always come from the localStorage.
     // This state may be `true` but session may have expired, by querying
     // yunohost infos, api may respond with `Unauthorized` in which case the `connected`
@@ -123,6 +123,29 @@ export default {
     if (this.connected) {
       this.$store.dispatch('GET_YUNOHOST_INFOS')
     }
+  },
+
+  mounted () {
+    // Konamicode ;P
+    const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']
+    let step = 0
+    document.addEventListener('keydown', ({ key }) => {
+      console.log(key, step)
+      if (key === konamiCode[step++]) {
+        if (step === konamiCode.length) {
+          this.$store.commit('SET_SPINNER', 'nyancat')
+          step = 0
+        }
+      } else {
+        step = 0
+      }
+    })
+
+    // April fools easter egg ;)
+    const today = new Date()
+    if (today.getDate() === 1 && today.getMonth() + 1 === 4) {
+      this.$store.commit('SET_SPINNER', 'magikarp')
+    }
   }
 }
 </script>

app/src/components/ApiWaitOverlay.vue

@@ -9,8 +9,7 @@
     <template v-slot:overlay>
       <b-card no-body>
         <div v-if="!error" class="mt-3 px-3">
-          <!-- <b-spinner /> -->
+          <div class="custom-spinner" :class="spinner" />
-          <img class="pacman" src="@/assets/ajax-loader.gif">
         </div>
 
         <b-card-body v-if="error">
@@ -47,7 +46,7 @@ export default {
   name: 'ApiWaitOverlay',
 
   computed: {
-    ...mapGetters(['waiting', 'lastAction', 'error']),
+    ...mapGetters(['waiting', 'lastAction', 'error', 'spinner']),
 
     progress () {
       if (!this.lastAction) return null
@@ -89,15 +88,50 @@ export default {
   margin-top: 2rem;
 }
 
-.pacman {
+.custom-spinner {
-  width: 24px;
+  animation: 4s linear infinite;
-  animation: back-and-forth 4s linear infinite;
+  background-repeat: no-repeat;
 
-  @keyframes back-and-forth {
+  &.pacman {
+    height: 24px;
+    width: 24px;
+    background-image: url('../assets/spinners/pacman.gif');
+    animation-name: back-and-forth-pacman;
+
+    @keyframes back-and-forth-pacman {
       0%, 100% { transform: scale(1); margin-left: 0; }
       49% { transform: scale(1); margin-left: calc(100% - 24px);}
       50% { transform: scale(-1); margin-left: calc(100% - 24px);}
       99% { transform: scale(-1); margin-left: 0;}
     }
+  }
+
+  &.magikarp {
+    height: 32px;
+    width: 32px;
+    background-image: url('../assets/spinners/magikarp.gif');
+    animation-name: back-and-forth-magikarp;
+
+    @keyframes back-and-forth-magikarp {
+      0%, 100% { transform: scale(1, 1); margin-left: 0; }
+      49% { transform: scale(1, 1); margin-left: calc(100% - 32px);}
+      50% { transform: scale(-1, 1); margin-left: calc(100% - 32px);}
+      99% { transform: scale(-1, 1); margin-left: 0;}
+    }
+  }
+
+  &.nyancat {
+    height: 40px;
+    width: 100px;
+    background-image: url('../assets/spinners/nyancat.gif');
+    animation-name: back-and-forth-nyancat;
+
+    @keyframes back-and-forth-nyancat {
+      0%, 100% { transform: scale(1, 1); margin-left: 0; }
+      49% { transform: scale(1, 1); margin-left: calc(100% - 100px);}
+      50% { transform: scale(-1, 1); margin-left: calc(100% - 100px);}
+      99% { transform: scale(-1, 1); margin-left: 0;}
+    }
+  }
 }
 </style>

app/src/store/settings.js

@@ -14,6 +14,7 @@ export default {
     cache: localStorage.getItem('cache') !== 'false',
     transitions: localStorage.getItem('transitions') !== 'false',
     experimental: localStorage.getItem('experimental') === 'true',
+    spinner: 'pacman',
     supportedLocales: supportedLocales
   },
 
@@ -41,6 +42,10 @@ export default {
     'SET_EXPERIMENTAL' (state, boolean) {
       localStorage.setItem('experimental', boolean)
       state.experimental = boolean
+    },
+
+    'SET_SPINNER' (state, spinner) {
+      state.spinner = spinner
     }
   },
 
@@ -69,6 +74,7 @@ export default {
     cache: state => (state.cache),
     transitions: state => (state.transitions),
     experimental: state => state.experimental,
+    spinner: state => state.spinner,
 
     availableLocales: state => {
       return Object.entries(state.supportedLocales).map(([locale, { name }]) => {