fix: svg not found causes page crash (#598)

src/components/SVGStat/index.tsx

@@ -1,27 +1,12 @@
-import { ComponentType, lazy, Suspense } from 'react'
+import { lazy, Suspense } from 'react'
 import styles from './style.module.scss';
 import { totalStat } from '@assets/index'
+import { loadSvgComponent } from '@/utils/svgUtils';
 
 // Lazy load both github.svg and grid.svg
-const GithubSvg = lazy(() =>
-  totalStat['./github.svg']()
-    .then((res) => {
-      return { default: res as ComponentType<any> }
-    })
-    .catch(() => {
-      return { default: () => <div>Failed to load SVG</div> };
-    })
-)
+const GithubSvg = lazy(() => loadSvgComponent(totalStat, './github.svg'))
 
-const GridSvg = lazy(() =>
-  totalStat['./grid.svg']()
-    .then((res) => {
-      return { default: res as ComponentType<any> }
-    })
-    .catch(() => {
-      return { default: () => <div>Failed to load SVG</div> };
-    })
-)
+const GridSvg = lazy(() => loadSvgComponent(totalStat, './grid.svg'))
 
 const SVGStat = () => (
   <div id="svgStat">

src/components/YearStat/index.tsx

@@ -1,24 +1,18 @@
-import { ComponentType, lazy, Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import Stat from '@/components/Stat';
 import useActivities from '@/hooks/useActivities';
 import { formatPace } from '@/utils/utils';
 import styles from './style.module.scss';
 import useHover from '@/hooks/useHover';
-import { yearStats } from '@assets/index'
+import { yearStats } from '@assets/index';
+import { loadSvgComponent } from '@/utils/svgUtils';
 
 const YearStat = ({ year, onClick }: { year: string, onClick: (_year: string) => void }) => {
   let { activities: runs, years } = useActivities();
   // for hover
   const [hovered, eventHandlers] = useHover();
   // lazy Component
-  const YearSVG = lazy(() =>
-    yearStats[`./year_${year}.svg`]()
-      .then((res) => ({ default: res as ComponentType<any> }))
-      .catch((err) => {
-        console.error(err);
-        return { default: () => <div>Failed to load SVG</div> };
-      })
-  );
+  const YearSVG = lazy(() => loadSvgComponent(yearStats, `./year_${year}.svg`));
 
   if (years.includes(year)) {
     runs = runs.filter((run) => run.start_date_local.slice(0, 4) === year);

src/utils/svgUtils.tsx

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+
+type SvgComponent = {
+  default: ComponentType<any>;
+};
+
+const FailedLoadSvg = () => <div>Failed to load SVG</div>;
+
+export const loadSvgComponent = async (
+  stats: Record<string, () => Promise<unknown>>,
+  path: string
+): Promise<SvgComponent> => {
+  try {
+    const module = await stats[path]();
+    return { default: module as ComponentType<any> };
+  } catch (error) {
+    console.error(error);
+    return { default: FailedLoadSvg };
+  }
+};