added fade-out animation for splash screen

src/components/DesktopView.vue

@@ -7,11 +7,10 @@ import DesktopList from '@/components/elements/DesktopList.vue'
 import FilterModal from '@/components/elements/FilterModal.vue'
 import InteractionBar from '@/components/elements/InteractionBar.vue'
 import TheMapInstance from '@/components/elements/TheMapInstance.vue'
-import IconChevronDown from '@/components/icons/icon-chevron-down.vue'
 import { useApp } from '@/stores/app'
 import { useCluster } from '@/stores/cluster'
 
-const { firstLocationsLoaded, isListShown } = storeToRefs(useApp())
+const { isListShown } = storeToRefs(useApp())
 const { singlesInView, clustersInView } = storeToRefs(useCluster())
 
 const openSuggestions = ref(false)
@@ -31,11 +30,8 @@ const openSuggestions = ref(false)
       <InteractionBar @open="openSuggestions = $event" />
       <DesktopList :singles="singlesInView" :clusters="clustersInView" :list-is-shown="isListShown" />
     </div>
-    <Button bg-color="white" :loading="!firstLocationsLoaded" class="mt-6 shadow" @click="isListShown = !isListShown">
-      <template v-if="firstLocationsLoaded" #icon>
-        <IconChevronDown :class="{ 'rotate-180': isListShown }" class="transition-transform delay-500" />
-      </template>
-      <template #label>{{ $t(!firstLocationsLoaded ? 'Loading' : isListShown ? 'Hide list' : 'Show list') }}</template>
+    <Button bg-color="white" class="mt-6 shadow" @click="isListShown = !isListShown">
+      <template #label>{{ $t(isListShown ? 'Hide list' : 'Show list') }}</template>
     </Button>
   </aside>
   <FilterModal class="absolute top-6 right-6" />

src/components/MobileView.vue

@@ -11,7 +11,7 @@ import { useApp } from '@/stores/app'
 import { useCluster } from '@/stores/cluster'
 import { useLocations } from '@/stores/locations'
 
-const { firstLocationsLoaded, isListShown } = storeToRefs(useApp())
+const { isListShown } = storeToRefs(useApp())
 const { singlesInView, clustersInView } = storeToRefs(useCluster())
 
 // TODO: Only show list when user searched for something
@@ -44,10 +44,7 @@ watch(selectedUuid, (uuid) => {
       enter-from-class="translate-y-[110%] opacity-0" leave-to-class="translate-y-[110%] opacity-0"
       enter-active-class="transition duration-300" leave-active-class="transition duration-300"
     >
-      <Button v-if="!firstLocationsLoaded" bg-color="white" loading class="absolute -translate-x-1/2 shadow bottom-6 left-1/2" as="label">
-        <template #label>{{ $t('Loading') }}</template>
-      </Button>
-      <template v-else-if="singlesInView.length > 0">
+      <template v-if="singlesInView.length > 0">
         <MobileList v-if="isListShown" :locations="singlesInView" class="absolute bottom-0 w-full" @close-list="isListShown = false; selectedUuid = undefined;" />
         <Button v-else bg-color="white" class="absolute -translate-x-1/2 shadow bottom-6 left-1/2" @click="isListShown = true">
           <template #label>{{ $t('Show list') }}</template>

src/components/elements/TheMapInstance.vue

@@ -48,13 +48,13 @@ const isDark = useDark()
 </script>
 
 <template>
-  <transition leave-active-class="ease-in duration-50" leave-from-class="opacity-100" leave-to-class="opacity-0">
+  <transition leave-active-class="duration-150 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
     <div
       v-if="showSplashScreen"
       class="absolute inset-0 grid supports-[height:100dvh]:h-[100dvh] h-screen px-12 z-100 place-content-center"
       :class="isDark ? 'bg-space' : 'bg-white'"
     >
-      <img :src="`logo-horizontal-${isDark ? 'dark' : 'light'}.svg`" loading="eager" :alt="$t('Crypto Map logo')">
+      <img :src="`logo-horizontal-${isDark ? 'dark' : 'light'}.svg`" loading="eager" :alt="$t('Crypto Map logo')" class="animate-fade">
     </div>
   </transition>
 

src/stores/app.ts

@@ -1,5 +1,5 @@
 import { defineStore, storeToRefs } from 'pinia'
-import { computed, ref } from 'vue'
+import { ref, watch } from 'vue'
 import { watchOnce } from '@vueuse/core'
 import { useCluster } from './cluster'
 
@@ -8,7 +8,13 @@ export const useApp = defineStore('app', () => {
   const firstLocationsLoaded = ref(false)
   const isListShown = ref(false)
   const mapLoaded = ref(false)
-  const showSplashScreen = computed(() => !mapLoaded.value || !firstLocationsLoaded.value)
+
+  const until = Date.now() + 200 // Show the splash screen at least for 300ms
+  const showSplashScreen = ref(true)
+  watch([mapLoaded, firstLocationsLoaded], () => {
+    if (mapLoaded.value && firstLocationsLoaded.value)
+      setTimeout(() => showSplashScreen.value = false, Math.max(0, until - Date.now()))
+  })
 
   const { singles, clusters } = storeToRefs(useCluster())
 

tailwind.config.js

@@ -56,12 +56,17 @@ module.exports = {
           from: { opacity: 0, transform: 'translateX(-2px)' },
           to: { opacity: 1, transform: 'translateX(0)' },
         },
+        fade: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
       },
       animation: {
         slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        fade: `fade 300ms ${tailwindTheme.transitionTimingFunction.DEFAULT}`,
       },
     },
   },