feat: introduce swr (#114)

web/package.json

@@ -25,7 +25,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.4",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.3.0",

web/src/api/index.ts

@@ -6,3 +6,4 @@
  */
 
 export * from './crates_api';
+export * from './swr';

web/src/api/swr.ts

@@ -0,0 +1,16 @@
+import useSWR from 'swr';
+import { fetchCrateDataUsingGET, fetchDownloadDataUsingGET } from 'api/crates_api';
+
+export const useCrateDataResultsQuery = (crateNames: string[]) => {
+  const { data, error, isLoading } = useSWR(['fetchCrateDataUsingGET', crateNames], ([, crateNames]) =>
+    Promise.all(crateNames.map((crateName) => fetchCrateDataUsingGET(crateName)))
+  );
+  return { crateDataResults: data ?? [], isLoading, error };
+};
+
+export const useCrateDownloadDataResultsQuery = (crateNames: string[]) => {
+  const { data, error, isLoading } = useSWR(['fetchDownloadDataUsingGET', crateNames], ([, crateNames]) =>
+    Promise.all(crateNames.map((crateName) => fetchDownloadDataUsingGET(crateName)))
+  );
+  return { crateDownloadDataResults: data, isLoading, error };
+};

web/src/components/[crate_names]/CratesTable.tsx

@@ -7,16 +7,21 @@
 
 import { Table, TableBody, TableContainer, Paper, Typography } from '@mui/material';
 import StatsTableHead from 'components/shared/table/StatsTableHead';
-import { useRecoilValue } from 'recoil';
-import { crateDataResultsState } from 'recoil/atoms';
 import CrateTableRow from './CrateTableRow';
+import { useCrateDataResultsQuery } from 'api';
+import TableSkelton from 'components/skelton/table/TableSkelton';
 
 interface Props {
   crateNames: string[];
 }
 
 const CratesTable = ({ crateNames }: Props): JSX.Element => {
-  const crateDataResults = useRecoilValue(crateDataResultsState(crateNames));
+  const { crateDataResults, isLoading } = useCrateDataResultsQuery(crateNames);
+
+  // TODO: remove this when swr supports React Suspense
+  if (isLoading) {
+    return <TableSkelton crateNames={crateNames} />;
+  }
 
   return (
     <section>

web/src/components/[crate_names]/DownloadChart.tsx

@@ -8,12 +8,13 @@
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { css } from '@emotion/react';
-import { crateDownloadDataResultsState } from 'recoil/atoms';
 import { Typography } from '@mui/material';
 import ReactECharts from 'components/echarts/ReactEChart';
 import type { EChartsOption } from 'echarts';
 import { uniform_data } from 'web_assembly/pkg/web_assembly';
 import { wasmInitSelector } from 'recoil/selectors';
+import { useCrateDownloadDataResultsQuery } from 'api';
+import ChartSkelton from 'components/skelton/chart/ChartSkelton';
 
 interface Props {
   crateNames: string[];
@@ -29,12 +30,12 @@ interface ChartData {
 }
 
 const DownloadChart = ({ crateNames }: Props): JSX.Element => {
-  const crateDownloadDataResults = useRecoilValue(crateDownloadDataResultsState(crateNames));
+  const { crateDownloadDataResults, isLoading } = useCrateDownloadDataResultsQuery(crateNames);
   const isWasmLoaded = useRecoilValue(wasmInitSelector);
 
   const uniformedData: ChartData = useMemo(() => {
     const t1 = performance.now();
-    const data: ChartData = JSON.parse(uniform_data(crateNames, JSON.stringify(crateDownloadDataResults)));
+    const data: ChartData = JSON.parse(uniform_data(crateNames, JSON.stringify(crateDownloadDataResults ?? [])));
     const t2 = performance.now();
     console.log(t2 - t1);
     return data;
@@ -62,6 +63,11 @@ const DownloadChart = ({ crateNames }: Props): JSX.Element => {
     series: uniformedData.data.map((d) => ({ data: d.downloads, name: d.name, type: 'line' })),
   };
 
+  // TODO: remove this when swr supports React Suspense
+  if (isLoading) {
+    return <ChartSkelton />;
+  }
+
   return (
     <section>
       <Typography variant="h6" component="h3" gutterBottom>

web/src/recoil/selectors.tsx

@@ -1,45 +1,6 @@
-import { selector, selectorFamily, waitForAll } from 'recoil';
-import { CrateResponse } from 'interfaces/crate';
-import { Downloads } from 'interfaces/downloads';
-import { fetchCrateDataUsingGET, fetchDownloadDataUsingGET } from 'api/index';
+import { selector } from 'recoil';
 import init from 'web_assembly/pkg';
 
-const crateDataResultQuery = selectorFamily<CrateResponse, string>({
-  key: 'crateDataResultQuery',
-  get: (crateName) => async () => {
-    const response = await fetchCrateDataUsingGET(crateName);
-    return response;
-  },
-});
-
-export const crateDataResultsQuery = selectorFamily<CrateResponse[], string[]>({
-  key: 'crateDataResultsQuery',
-  get:
-    (crateNames) =>
-    ({ get }) => {
-      const crateDataResults = get(waitForAll(crateNames.map((crateName) => crateDataResultQuery(crateName))));
-      return crateDataResults.filter((d) => d);
-    },
-});
-
-const crateDownloadDataResultQuery = selectorFamily<Downloads, string>({
-  key: 'crateDownloadDataResultQuery',
-  get: (crateName) => async () => {
-    const response = await fetchDownloadDataUsingGET(crateName);
-    return response;
-  },
-});
-
-export const crateDownloadDataResultsQuery = selectorFamily<Downloads[], string[]>({
-  key: 'crateDownloadDataResultsQuery',
-  get:
-    (crateNames) =>
-    ({ get }) => {
-      const crateDataResults = get(waitForAll(crateNames.map((crateName) => crateDownloadDataResultQuery(crateName))));
-      return crateDataResults.filter((d) => d);
-    },
-});
-
 export const wasmInitSelector = selector<boolean>({
   key: 'wasmInitSelector',
   get: async () => {