speed up heatmap

src/routes/heatmap/+page.svelte

@@ -12,8 +12,11 @@
   let selectedFormat: "png" | "jpeg" | "svg" = "png";
   let selectedTimePeriod = "1D";
   let iframeUrl: string;
+  let loading = true;
 
   async function getHeatMap() {
+    loading = true;
+    try {
       const cachedData = getCache(selectedTimePeriod, "getHeatmap");
       if (cachedData) {
         rawData = cachedData;
@@ -31,8 +34,18 @@
         setCache(selectedTimePeriod, rawData, "getHeatmap");
       }
 
-    const blob = new Blob([rawData], { type: "text/html" });
+      const htmlContent = rawData;
+
+      const blob = new Blob([htmlContent], { type: "text/html" });
+      if (iframeUrl) {
+        URL.revokeObjectURL(iframeUrl);
+      }
       iframeUrl = URL.createObjectURL(blob);
+    } catch (error) {
+      console.error("Error loading heatmap:", error);
+    } finally {
+      loading = false;
+    }
   }
 
   async function downloadPlot(item) {
@@ -92,10 +105,6 @@
   }
 </script>
 
-<svelte:head>
-  <script src="https://cdn.plot.ly/plotly-2.18.0.min.js" defer></script>
-</svelte:head>
-
 <SEO
   title="S&P 500 Stock Market Heatmap"
   description="A stock market heatmap showing the performance of the individual stocks, sectors and industries in the S&P500."
@@ -226,12 +235,25 @@
             </div>
           </div>
           <div class="w-full min-h-screen bg-[#09090B] overflow-hidden">
+            {#if loading}
+              <div class="flex justify-center items-center h-[50vh]">
+                <div
+                  class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"
+                ></div>
+              </div>
+            {/if}
+
             {#if rawData}
               <iframe
                 bind:this={iframe}
                 src={iframeUrl}
-                class="w-full h-screen border-none"
-                on:load={() => (iframeLoaded = true)}
+                class="w-full h-screen border-none {loading ? 'hidden' : ''}"
+                on:load={() => {
+                  iframeLoaded = true;
+                  loading = false;
+                }}
+                loading="eager"
+                title="S&P 500 Heatmap"
               />
             {/if}
           </div>
@@ -240,3 +262,13 @@
     </div>
   </div>
 </section>
+
+<style>
+  iframe {
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .hidden {
+    opacity: 0;
+  }
+</style>