clean code

src/routes/earnings-calendar/+page.server.ts

@@ -1,4 +1,4 @@
-export const load = async ({ locals, setHeaders }) => {
+export const load = async ({ locals }) => {
   const getEarningsCalendar = async () => {
     const { apiKey, apiURL } = locals;
     // make the POST request to the endpoint
@@ -11,7 +11,6 @@ export const load = async ({ locals, setHeaders }) => {
     });
 
     const output = await response.json();
-    setHeaders({ "cache-control": "public, max-age=3000" });
 
     return output;
   };

src/routes/heatmap/+page.svelte

@@ -3,19 +3,27 @@
   import { Button } from "$lib/components/shadcn/button/index.js";
   import SEO from "$lib/components/SEO.svelte";
   import { setCache, getCache } from "$lib/store";
-  import { onDestroy } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import toast from "svelte-french-toast";
 
   export let data;
   let isLoaded = false;
+  let isLoading = true;
 
-  let rawData = data?.getData;
+  let rawData;
   let iframe: HTMLIFrameElement;
-  let selectedFormat: "png" | "jpeg" | "svg" = "png";
   let selectedTimePeriod = "1D";
-  let iframeUrl: string;
+  let iframeUrl;
 
-  async function getHeatMap() {
+  onMount(async () => {
+    await getHeatMap("1D");
+  });
+
+  async function getHeatMap(timePeriod) {
+    selectedTimePeriod = timePeriod;
+    isLoading = true;
+
+    try {
       const cachedData = getCache(selectedTimePeriod, "getHeatmap");
       if (cachedData) {
         rawData = cachedData;
@@ -34,7 +42,32 @@
       }
 
       const blob = new Blob([rawData], { type: "text/html" });
+      if (iframeUrl) {
+        URL.revokeObjectURL(iframeUrl);
+      }
       iframeUrl = URL.createObjectURL(blob);
+
+      // Wait for iframe to load before considering it ready
+      if (iframe) {
+        const loadPromise = new Promise<void>((resolve) => {
+          iframe.onload = () => resolve();
+        });
+
+        // Set a timeout to prevent hanging if iframe doesn't load properly
+        const timeoutPromise = new Promise<void>((resolve) => {
+          setTimeout(() => resolve(), 50);
+        });
+
+        await Promise.race([loadPromise, timeoutPromise]);
+      }
+
+      isLoaded = true;
+    } catch (error) {
+      console.error("Error loading heatmap:", error);
+      toast.error("Failed to load heatmap. Please try again.");
+    } finally {
+      isLoading = false;
+    }
   }
 
   async function downloadPlot(item) {
@@ -85,19 +118,15 @@
     );
   }
 
+  function handleIframeLoad() {
+    // This will be triggered when the iframe has fully loaded
+    isLoaded = true;
+    isLoading = false;
+  }
+
   onDestroy(() => {
     if (iframeUrl) URL.revokeObjectURL(iframeUrl);
   });
-
-  $: {
-    if (selectedTimePeriod && typeof window !== "undefined") {
-      (async () => {
-        isLoaded = false;
-        getHeatMap();
-        isLoaded = true;
-      })();
-    }
-  }
 </script>
 
 <SEO
@@ -136,6 +165,7 @@
                   <Button
                     builders={[builder]}
                     class="border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    disabled={isLoading}
                   >
                     <span class="truncate text-white">Time Period</span>
                     <svg
@@ -167,7 +197,7 @@
                       <DropdownMenu.Item class="sm:hover:bg-primary">
                         <div class="flex items-center">
                           <button
-                            on:click={() => (selectedTimePeriod = item)}
+                            on:click={() => getHeatMap(item)}
                             class="cursor-pointer text-white"
                           >
                             <span class="mr-8">{item}</span>
@@ -184,6 +214,7 @@
                   <Button
                     builders={[builder]}
                     class="border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                    disabled={isLoading || !isLoaded}
                   >
                     <span class="truncate text-white">Download</span>
                     <svg
@@ -229,26 +260,29 @@
               </DropdownMenu.Root>
             </div>
           </div>
-          <div class="w-full min-h-screen bg-[#09090B] overflow-hidden">
+          <div class="w-full h-full bg-[#09090B] overflow-hidden">
-            {#if isLoaded}
+            {#if isLoading}
-              {#if rawData}
+              <div class="flex justify-center items-center h-80">
+                <div class="relative">
+                  <label
+                    class=" 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-bars loading-md text-gray-400"
+                    ></span>
+                  </label>
+                </div>
+              </div>
+            {:else if rawData && iframeUrl && !isLoading}
               <iframe
                 bind:this={iframe}
                 src={iframeUrl}
                 class="w-full h-screen border-none"
+                on:load={handleIframeLoad}
+                title="S&P 500 Heatmap"
               />
-              {/if}
             {:else}
               <div class="flex justify-center items-center h-80">
-                <div class="relative">
+                <p class="text-gray-400">No data available</p>
-                  <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>