From 643c9e31067568350c6418c58d7bd0dd6b0c85f6 Mon Sep 17 00:00:00 2001
From: Daniel Vinci <me@danielvinci.com>
Date: Fri, 30 Apr 2021 14:33:02 -0600
Subject: [PATCH] more improvements

---
 src/components/Globe.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Globe.svelte b/src/components/Globe.svelte
index a315408..4e51eb1 100644
--- a/src/components/Globe.svelte
+++ b/src/components/Globe.svelte
@@ -1,13 +1,15 @@
 <script>
   import * as d3 from "d3";
   import * as sjs from "satellite.js";
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import tles from "../../static/tle.js";
   import world110m from "../../static/world-110m.js";
   import * as topojson from "topojson";
 
   export let width = 300;
 
+  let shouldLoop = true;
+
   async function doThing() {
     let satelliteJs = sjs;
     var RADIANS = Math.PI / 180;
@@ -338,7 +340,7 @@
         })
       );
 
-      window.requestAnimationFrame(animateSats);
+      if (shouldLoop) window.requestAnimationFrame(animateSats);
       return sats;
     }
 
@@ -407,7 +409,7 @@
 
       updateSats(date);
       draw();
-      window.requestAnimationFrame(animateSats);
+      if (shouldLoop) window.requestAnimationFrame(animateSats);
     }
 
     initGlobe();
@@ -418,6 +420,10 @@
   onMount(async () => {
     doThing();
   });
+
+  onDestroy(() => {
+    shouldLoop = false;
+  });
 </script>
 
 <div class="globeContainer">