Fix the locations list filters and add reveal transitions

Typically add a delay between two click (Limiter) to click again. Thanks Nico!

src/organisms/Locations.svelte

@@ -1,15 +1,20 @@
 <script>
     import { onMount } from 'svelte'
     import { flip } from 'svelte/animate'
-	import { crossfade } from 'svelte/transition'
-	import { quintOut } from 'svelte/easing'
     import { locations, countries, continents } from '../store'
+    import { crossfadeReceive, crossfadeSend } from '../animations'
+    import * as fn from '../functions'
+
+    // Dependencies
+    import AOS from 'aos'
 
     // Components
     import Button from '../atoms/Button'
     import Location from '../molecules/Location'
 
     // Variables
+    const transitionDuration = 800
+    let clickOrigin = Date.now()
     let filterLocations
     let continentsToDisplay = []
     let continentsFiltered = []
@@ -20,31 +25,24 @@
     continentsFiltered = [...continentsToDisplay]
 
     // Filter by continent
-    const toggleContinents = (event, continent) => continentsFiltered = (!continent) ? [...continentsToDisplay] : [continent]
-
-    // Crossfade animation
-    const [send, receive] = crossfade({
-		duration: d => Math.sqrt(d * 200),
-		fallback(node, params) {
-			const style = getComputedStyle(node)
-			const transform = style.transform === 'none' ? '' : style.transform
-			return {
-				duration: 600,
-				easing: quintOut,
-				css: t => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`
-			}
-		}
-	})
+    // detects if click difference if too short
+    const toggleContinents = (event, continent) => {
+        if (Date.now() - clickOrigin < transitionDuration) {
+            return
+        }
+        continentsFiltered = (!continent) ? [...continentsToDisplay] : [continent]
+        clickOrigin = Date.now()
+    }
 
 
     /*
     ** Run code on browser only
     */
     onMount(() => {
-
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
     })
 </script>
 
@@ -56,29 +54,23 @@
     <ul class="browse__continents" id="continents">
         {#if continentsToDisplay.length > 1}
         <li on:click={e => toggleContinents(e)}>
-            <Button type="button" text="All" className="button-outline {(continentsFiltered.length <= 1) ? 'disabled' : ''}" />
+            <Button type="button" text="All" class="button-outline {(continentsFiltered.length <= 1) ? 'disabled' : ''}" />
         </li>
         {/if}
         {#each continentsToDisplay as continent}
         <li on:click={e => toggleContinents(e, continent)}>
-            <Button type="button" text={continent.name} className="button-outline {(!continentsFiltered.includes(continent)) ? 'disabled' : ''}" />
+            <Button type="button" text={continent.name} class="button-outline {(!continentsFiltered.includes(continent)) ? 'disabled' : ''}" />
         </li>
         {/each}
     </ul>
 
     <div class="browse__locations" id="locations_list">
     {#each filteredLocations as location (location.id)}
-        <div
-            animate:flip="{{duration: 600}}"
-            in:receive="{{key: location.id}}"
-            out:send="{{key: location.id}}"
+        <div animate:flip="{{ duration: transitionDuration }}"
+            in:crossfadeReceive="{{ key: location.id }}"
+            out:crossfadeSend="{{ key: location.id }}"
         >
-        <!-- Animation: Grid with auto-min is fucking up the transition -->
-            <Location
-                name={location.name}
-                slug={location.slug}
-                country={location.country}
-            />
+            <Location {location} />
         </div>
     {/each}
     </div>