From fff54a19eba72a98f7ebf6c521ccc0d0c3d51009 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 24 Jul 2020 17:18:23 -0700
Subject: [PATCH] fix: clear timeout in onMount return function

---
 src/Copy/Copy.svelte                      | 18 ++++++++++--------
 src/InlineLoading/InlineLoading.svelte    | 17 +++++++++--------
 src/Notification/ToastNotification.svelte |  9 ++++-----
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/Copy/Copy.svelte b/src/Copy/Copy.svelte
index 8c2448a4..57420652 100644
--- a/src/Copy/Copy.svelte
+++ b/src/Copy/Copy.svelte
@@ -3,15 +3,17 @@
   export let feedbackTimeout = 2000;
   export let ref = null;
 
-  import { onDestroy } from "svelte";
+  import { onMount } from "svelte";
 
-  $: animation = undefined;
-  $: timeoutId = undefined;
-  $: showFeedback = timeoutId !== undefined;
+  let animation = undefined;
+  let timeout = undefined;
 
-  onDestroy(() => {
-    window.clearTimeout(timeoutId);
-    timeoutId = undefined;
+  $: showFeedback = timeout !== undefined;
+
+  onMount(() => {
+    return () => {
+      clearTimeout(timeout);
+    };
   });
 </script>
 
@@ -29,7 +31,7 @@
   on:click={() => {
     if (animation === 'fade-in') return;
     animation = 'fade-in';
-    timeoutId = setTimeout(() => {
+    timeout = setTimeout(() => {
       animation = 'fade-out';
     }, feedbackTimeout);
   }}
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index d9dd5333..2853e872 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -4,27 +4,28 @@
   export let iconDescription = undefined;
   export let successDelay = 1500;
 
-  import { createEventDispatcher, afterUpdate, onDestroy } from "svelte";
+  import { createEventDispatcher, afterUpdate, onMount } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
   import Error20 from "carbon-icons-svelte/lib/Error20";
   import { Loading } from "../Loading";
 
   const dispatch = createEventDispatcher();
 
-  $: timeoutId = undefined;
+  let timeout = undefined;
+
+  onMount(() => {
+    return () => {
+      clearTimeout(timeout);
+    };
+  });
 
   afterUpdate(() => {
     if (status === "finished") {
-      timeoutId = window.setTimeout(() => {
+      timeout = setTimeout(() => {
         dispatch("success");
       }, successDelay);
     }
   });
-
-  onDestroy(() => {
-    window.clearTimeout(timeoutId);
-    timeoutId = undefined;
-  });
 </script>
 
 <div
diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index d40da068..127216fb 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -17,19 +17,18 @@
 
   const dispatch = createEventDispatcher();
 
-  $: open = true;
-  $: timeoutId = undefined;
+  let open = true;
+  let timeoutId = undefined;
 
   onMount(() => {
     if (timeout) {
-      timeoutId = window.setTimeout(() => {
+      timeoutId = setTimeout(() => {
         open = false;
       }, timeout);
     }
 
     return () => {
-      window.clearTimeout(timeoutId);
-      timeoutId = undefined;
+      clearTimeout(timeoutId);
     };
   });
 </script>