update politician page

src/routes/politicians/[slug]/+page.svelte

@@ -5,7 +5,6 @@
   import democraticBackground from "$lib/images/bg-democratic.png";
   import otherBackground from "$lib/images/bg-other.png";
   import { getPartyForPoliticians, abbreviateNumber } from '$lib/utils';
-  import defaultAvatar from '$lib/images/senator/default-avatar.png';
   import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
   import { Chart } from 'svelte-echarts'
   
@@ -13,21 +12,20 @@
   
   export let data;
   let isLoaded = false;
-  let rawData = data?.getPolitician;
+  let rawData = data?.getPolitician?.output;
   let displayList = [];
   let optionsData = {};
   
   let name = rawData?.at(0)?.representative ?? 'n/a';
   let numOfTrades = rawData?.length;
   let lastTradedDate = rawData?.at(0)?.transactionDate;
-  let politicianParty = 'n/a';
-  let images = {};
   let buySellRatio = 0
   let totalAmountTraded = 0;
-  let politicianImage;
+  let politicianImage =  data?.getPolitician?.politicianImage;
-  let politicianDistrict;
+  let politicianDistrict = data?.getPolitician?.politicianDistrict;
-  let politicianCongress;
+  let politicianCongress =  data?.getPolitician?.politicianCongress;
   let numOfAssets = new Set(rawData?.map(item => item?.ticker))?.size;
+  let politicianParty = data?.getPolitician?.politicianParty;
 
   
   function getYearFromDate(dateString) {
@@ -74,23 +72,6 @@
       }
   }
   
-  // Function to load images only when they are viewed
-  async function loadImages() {
-      const imageFiles = import.meta.glob('$lib/images/senator/*.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) {
@@ -191,28 +172,6 @@
   
   onMount(async () => {
     isLoaded = false;
-      await loadImages();
-  
-      if (rawData && rawData.length > 0) {
-      let firstItem = rawData[0];
-      let representative = firstItem?.representative || '';
-  
-      representative = representative?.replace('Jr', '')
-          ?.replace(/Dr./g, '')
-          ?.replace(/Dr_/g, '');
-  
-      const fullName = representative?.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, '_')?.trim();
-      firstItem.image = images[fullName] || defaultAvatar;
-      firstItem.representative = fullName?.replace(/_/g, ' ');
-  
-      const party = getPartyForPoliticians(firstItem?.representative);
-      firstItem.party = party;
-  
-      politicianImage = firstItem?.image;
-      politicianParty = firstItem?.party;
-      politicianDistrict = firstItem?.district;
-      politicianCongress = firstItem?.congress;
-  
     optionsData = await getPlotOptions();
      
     const typeCounts = rawData?.reduce((counts, item) => {
@@ -224,7 +183,6 @@
   
     displayList = rawData?.slice(0,20) ?? [];
       
-  }
 
     isLoaded = true;
   

src/routes/politicians/[slug]/+page.ts

@@ -1,9 +1,15 @@
 import { userRegion, getCache, setCache } from '$lib/store';
-
+import defaultAvatar from '$lib/images/senator/default-avatar.png';
+import { getPartyForPoliticians } from '$lib/utils';
 
 const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
 let apiURL;
+let images = {};
+let politicianImage;
+let politicianDistrict;
+let politicianCongress;
+let politicianParty = 'n/a';
 
 userRegion.subscribe(value => {
 
@@ -15,15 +21,32 @@ userRegion.subscribe(value => {
 });
 
 
+// Function to load images only when they are viewed
+  async function loadImages() {
+    const imageFiles = import.meta.glob('$lib/images/senator/*.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);
+  }
+
 
 export const load = async ({params}) => {
   const getPolitician = async () => {
-    let output;
+    let res;
 
     // Get cached data for the specific tickerID
     const cachedData = getCache(params.slug, 'getPolitician');
     if (cachedData) {
-      output = cachedData;
+      res = cachedData;
     } else {
 
         const postData = {'politicianId': params.slug}
@@ -36,13 +59,37 @@ export const load = async ({params}) => {
         body: JSON.stringify(postData)
       });
 
-      output = await response.json();
+      const output = await response.json();
+      await loadImages();
 
       // Cache the data for this specific tickerID with a specific name 'getPolitician'
-      setCache(params.slug, output, 'getPolitician');
+
+      if (output && output.length > 0) {
+          let firstItem = output?.at(0);
+          let representative = firstItem?.representative || '';
+      
+          representative = representative?.replace('Jr', '')
+              ?.replace(/Dr./g, '')
+              ?.replace(/Dr_/g, '');
+      
+          const fullName = representative?.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, '_')?.trim();
+          firstItem.image = images[fullName] || defaultAvatar;
+          firstItem.representative = fullName?.replace(/_/g, ' ');
+      
+          const party = getPartyForPoliticians(firstItem?.representative);
+          firstItem.party = party;
+      
+          politicianImage = firstItem?.image;
+          politicianParty = firstItem?.party;
+          politicianDistrict = firstItem?.district;
+          politicianCongress = firstItem?.congress;
       }
 
-    return output;
+      res = {output, politicianImage, politicianParty, politicianDistrict, politicianCongress};
+      setCache(params.slug, res, 'getPolitician');
+    }
+
+    return res
   };
 
   // Make sure to return a promise