refactor code

src/routes/hedge-funds/+page.svelte

@@ -12,9 +12,7 @@
 
 
   let rawData = data?.getHedgeFunds;
-  let slicedRawData = [];
   let displayList = [];
-  let images = {};
   let filterQuery = '';
 
   let isLoaded = false;
@@ -188,7 +186,7 @@ async function handleInput(event) {
                                   <div class="flex flex-col justify-center items-center rounded-2xl ">
 
                                     <div class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center">
-                                      <img style="clip-path: circle(50%);" class="rounded-full w-16" src={item?.image} loading="lazy"/>
+                                      <img style="clip-path: circle(50%);" class="rounded-full w-16" src={`${cloudFrontUrl}/assets/hedge_funds/default-avatar.png`} loading="lazy"/>
                                     </div>
                                     <span class="text-white text-md font-semibold mt-2 mb-2 w-64 text-center">
                                       {item?.name}

src/routes/hedge-funds/+page.ts

@@ -1,25 +1,4 @@
 import { getCache, setCache } from '$lib/store';
-import defaultAvatar from '$lib/images/hedge_funds/default-avatar.png';
-
-
-
-let images = {};
-// Function to load images only when they are viewed
-async function loadImages() {
-  const imageFiles = import.meta.glob('$lib/images/hedge_funds/*.png');
-  const imagesPromises = [];
-
-  for (const [path, resolver] of Object?.entries(imageFiles)) {
-    const imageNameMatch = path.match(/\/([^/]+)\.png$/);
-    if (imageNameMatch && imageNameMatch[1] !== 'default-avatar') {
-      imagesPromises?.push(resolver()?.then(module => {
-        images[imageNameMatch[1]] = module.default;
-      }));
-    }
-  }
-
-  await Promise.all(imagesPromises);
-}
 
 
 
@@ -35,11 +14,6 @@ export const load = async () => {
         
         output = (await import('$lib/hedge-funds/all-hedge-funds.json'))?.default;
         
-        await loadImages();
-        output?.forEach(item => {  
-          item.image = images[item?.cik] || defaultAvatar;
-          });
-          
         // Cache the data for this specific tickerID with a specific name 'getHedgeFunds'
         setCache('getHedgeFunds', output, 'getHedgeFunds');
       }

src/routes/hedge-funds/[slug]/+page.svelte

@@ -2,7 +2,6 @@
   import { goto } from '$app/navigation';
   import { screenWidth, numberOfUnreadNotification, displayCompanyName } from '$lib/store';
   import cardBackground from "$lib/images/bg-hedge-funds.png";
-  import defaultAvatar from "$lib/images/hedge_funds/default-avatar.png";
   import { abbreviateNumber, formatString } from '$lib/utils';
 
 import { Chart } from 'svelte-echarts'
@@ -16,6 +15,8 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
   import { onMount } from 'svelte';
   
   export let data;
+  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
+
 
   let isLoaded = false;
   let rawData = data?.getHedgeFundsData;
@@ -142,23 +143,6 @@ function formatToFY(dateString) {
 }
 
 
-  // Function to load images only when they are viewed
-  async function loadImages() {
-      const imageFiles = import.meta.glob('$lib/images/hedge_funds/*.png');
-      const imagesPromises = [];
-  
-      for (const [path, resolver] of Object?.entries(imageFiles)) {
-        const imageNameMatch = path.match(/\/([^/]+)\.png$/);
-        if (imageNameMatch && imageNameMatch[1] !== 'default-avatar') {
-          imagesPromises?.push(resolver()?.then(module => {
-            images[imageNameMatch[1]] = module.default;
-          }));
-        }
-      }
-  
-      await Promise?.all(imagesPromises);
-    }
-  
   
   function normalizer(value) {
     if (Math?.abs(value) >= 1e12) {
@@ -251,7 +235,6 @@ function formatToFY(dateString) {
   }
   
 onMount(async () => {
-    await loadImages();
     optionsData = await getPlotOptions();
     isLoaded = true;
 });
@@ -353,7 +336,7 @@ onMount(async () => {
                     <div class="flex flex-col justify-center items-center rounded-lg ">
 
                       <div class="mt-10 rounded-full border border-slate-600 w-24 h-24 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center">
-                        <img style="clip-path: circle(50%);" class="rounded-full w-20"  src={images[rawData?.cik] ?? defaultAvatar} loading="lazy"/>
+                        <img style="clip-path: circle(50%);" class="rounded-full w-20" src={`${cloudFrontUrl}/assets/hedge_funds/default-avatar.png`} loading="lazy"/>
                       </div>
                       <span class="text-white text-md font-semibold mt-2 mb-2 w-64 text-center">
                         {formatString($displayCompanyName)}

src/routes/hedge-funds/[slug]/+page.ts

@@ -1,9 +1,19 @@
 import { displayCompanyName, getCache, setCache } from '$lib/store';
 
 export const load = async ({ parent, params }) => {
+
+  const getCIKNumber = async () => {
+    return params.slug;
+  };
+
   const getHedgeFundsData = async () => {
     const cachedData = getCache(params.slug, 'getHedgeFundsData');
-    if (cachedData) return cachedData;
+
+    if (cachedData) {
+      displayCompanyName.update(() => cachedData?.name ?? params.slug);
+
+      return cachedData;
+    }
 
     const { apiURL, apiKey } = await parent();
     const response = await fetch(apiURL+'/cik-data', {
@@ -20,13 +30,15 @@ export const load = async ({ parent, params }) => {
     if (output?.holdings) {
       output.holdings = output?.holdings?.filter(item => item?.sharesNumber && item?.symbol);
     }
+    displayCompanyName.update(() => output?.name ?? params.slug);
 
     setCache(params.slug, output, 'getHedgeFundsData');
-    displayCompanyName.update(() => output?.name ?? params.slug);
     return output;
   };
 
   return {
-    getHedgeFundsData: await getHedgeFundsData()
+    getHedgeFundsData: await getHedgeFundsData(),
+    getCIKNumber: await getCIKNumber(),
   };
-};
+};
+