ui fix

src/routes/heatmap/+page.svelte

@@ -4,11 +4,13 @@
   import SEO from "$lib/components/SEO.svelte";
   import { setCache, getCache } from "$lib/store";
   import { onDestroy } from "svelte";
+  import toast from "svelte-french-toast";
 
   export let data;
+  let isLoaded = false;
+
   let rawData = data?.getData;
   let iframe: HTMLIFrameElement;
-  let iframeLoaded = false;
   let selectedFormat: "png" | "jpeg" | "svg" = "png";
   let selectedTimePeriod = "1D";
   let iframeUrl: string;
@@ -36,6 +38,10 @@
   }
 
   async function downloadPlot(item) {
+    return toast.promise(
+      (async () => {
+        let selectedFormat;
+
         if (item === "PNG") {
           selectedFormat = "png";
         } else if (item === "JPG") {
@@ -44,39 +50,39 @@
           selectedFormat = "svg";
         }
 
-    if (!iframe || !iframeLoaded) return;
+        if (!iframe || !isLoaded) throw new Error("Iframe not ready");
 
-    try {
         const iframeWindow = iframe.contentWindow;
-      if (!iframeWindow) return;
+        if (!iframeWindow) throw new Error("Iframe window not available");
 
-      const Plotly = (iframeWindow as any).Plotly;
+        const Plotly = iframeWindow.Plotly;
         if (!Plotly) throw new Error("Plotly not found in iframe");
 
         const plotDiv =
           iframe.contentDocument?.querySelector(".plotly-graph-div");
         if (!plotDiv) throw new Error("Plotly div not found");
 
-      // Configure image options based on format
         const options = {
           format: selectedFormat,
           width: 1200,
           height: 800,
         };
 
-      // Get image data URL
         const imageData = await Plotly.toImage(plotDiv, options);
 
-      // Create download link
         const link = document.createElement("a");
         link.href = imageData;
         link.download = `sp500-heatmap-${selectedTimePeriod}`;
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
-    } catch (error) {
+      })(),
-      console.error("Download failed:", error);
+      {
-    }
+        loading: "Downloading heatmap...",
+        success: "Heatmap downloaded!",
+        error: "Download failed. Try again.",
+      },
+    );
   }
 
   onDestroy(() => {
@@ -86,16 +92,14 @@
   $: {
     if (selectedTimePeriod && typeof window !== "undefined") {
       (async () => {
-        await getHeatMap();
+        isLoaded = false;
+        getHeatMap();
+        isLoaded = true;
       })();
     }
   }
 </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."
@@ -212,7 +216,7 @@
                         <div class="flex items-center">
                           <button
                             on:click={() => downloadPlot(item)}
-                            disabled={!iframeLoaded}
+                            disabled={!isLoaded}
                             class="cursor-pointer text-white"
                           >
                             <span class="mr-8">Download {item}</span>
@@ -226,14 +230,27 @@
             </div>
           </div>
           <div class="w-full min-h-screen bg-[#09090B] overflow-hidden">
+            {#if isLoaded}
               {#if rawData}
                 <iframe
                   bind:this={iframe}
                   src={iframeUrl}
                   class="w-full h-screen border-none"
-                on:load={() => (iframeLoaded = true)}
                 />
               {/if}
+            {:else}
+              <div class="flex justify-center items-center h-80">
+                <div class="relative">
+                  <label
+                    class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                  >
+                    <span
+                      class="loading loading-spinner loading-md text-gray-400"
+                    ></span>
+                  </label>
+                </div>
+              </div>
+            {/if}
           </div>
         </main>
       </div>