Rewrite async calls in onMount

src/components/Carousel/Carousel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, tick } from 'svelte'
+  import { onDestroy, onMount, tick } from 'svelte'
   import { createStore } from '../../store'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
@@ -92,12 +92,10 @@
         directionFnDescription[autoplayDirection]()
       }, autoplayDuration)
     }
-    return {
+    return () => {
-      teardownAutoplay: () => {
       interval && clearInterval(interval)
     }
   }
-  }
   
   function addClones() {
     const first = pagesElement.children[0]
@@ -106,11 +104,13 @@
     pagesElement.append(first.cloneNode(true))
   }
 
-  onMount(async () => {
+  let cleanupFns = []
+  onMount(() => {
+    (async () => {
       await tick()
-    const unsubscribe = store.subscribe(value => {
+      cleanupFns.push(store.subscribe(value => {
         currentPageIndex = value.currentPageIndex
-    })
+      }))
       if (pagesElement && pageWindowElement) {
         // load first and last child to clone them 
         loaded = [0, pagesElement.children.length - 1]
@@ -118,15 +118,14 @@
         infinite && addClones()
         applyPageSizes()
       }
-
+      cleanupFns.push(applyAutoplay())
-    const { teardownAutoplay } = applyAutoplay()
-
       addResizeEventListener(applyPageSizes)
-    return () => {
+    })()
+  })
+
+  onDestroy(() => {
     removeResizeEventListener(applyPageSizes)
-      teardownAutoplay()
+    cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn())
-      unsubscribe()
-    }
   })
 
   function handlePageChange(pageIndex) {