refactor(expandable-tile): use onMount, afterUpdate methods

src/components/Tile/ExpandableTile.svelte

@@ -11,7 +11,7 @@
   export let light = false;
   export let style = undefined;
 
-  import { tick } from 'svelte';
+  import { onMount, afterUpdate } from 'svelte';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
   import { cx, css } from '../../lib';
 
@@ -19,23 +19,20 @@
   let tileContent = undefined;
   let aboveTheFold = undefined;
 
-  async function setHeight() {
+  onMount(() => {
-    await tick();
-    tileMaxHeight = expanded
-      ? tileContent.getBoundingClientRect().height
-      : aboveTheFold.getBoundingClientRect().height;
-  }
-
-  $: {
-    if (tile) {
     const style = window.getComputedStyle(tile);
 
     tileMaxHeight = aboveTheFold.getBoundingClientRect().height;
     tilePadding =
       parseInt(style.getPropertyValue('padding-top'), 10) +
       parseInt(style.getPropertyValue('padding-bottom'), 10);
-    }
+  });
-  }
+
+  afterUpdate(() => {
+    tileMaxHeight = expanded
+      ? tileContent.getBoundingClientRect().height
+      : aboveTheFold.getBoundingClientRect().height;
+  });
 </script>
 
 <div
@@ -45,14 +42,12 @@
   on:click
   on:click={() => {
     expanded = !expanded;
-    setHeight();
   }}
   on:keypress
   on:keypress={event => {
     if (event.key === ' ' || event.key === 'Enter') {
       event.preventDefault();
       expanded = !expanded;
-      setHeight();
     }
   }}
   on:mouseover