diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte
index b259e503..8689fe37 100644
--- a/src/components/Tile/ExpandableTile.svelte
+++ b/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() {
-    await tick();
+  onMount(() => {
+    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;
-  }
-
-  $: {
-    if (tile) {
-      const style = window.getComputedStyle(tile);
-
-      tileMaxHeight = aboveTheFold.getBoundingClientRect().height;
-      tilePadding =
-        parseInt(style.getPropertyValue('padding-top'), 10) +
-        parseInt(style.getPropertyValue('padding-bottom'), 10);
-    }
-  }
+  });
 </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