feat: improve performance of home page by suspension of search result…

…s table
rango-exchange · Dec 23, 2024 · 4c3dbd1 · 4c3dbd1
1 parent 914e71c
commit 4c3dbd1
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/src/app/(home)/_components/RecentSwaps/index.tsx b/src/app/(home)/_components/RecentSwaps/index.tsx
@@ -6,26 +6,24 @@ const RecentSwaps = async () => {
   const lastSwaps = await getLastSwaps();
 
   return (
-    <div className="pt-[17.68rem] md:pt-[14.68rem] flex justify-center">
-      <div className="w-[calc(100%-3.125rem)] md:container mt-30  md:mt-[3.125rem] rounded-normal bg-baseForeground px-15 py-20 md:p-35 overflow-hidden">
-        <div className="flex flex-col">
-          <div className="flex justify-between  md:mb-25 items-start">
-            <div className="flex flex-col justify-center items-start">
-              <h2 className="text-14 md:text-28 font-semibold text-primary-500">
-                Recent Swaps
-              </h2>
-              <p className="text-12 md:text-16 text-neutral-800">
-                Latest 25 swaps on Rango
-              </p>
-            </div>
-            <div className="flex items-center pt-10">
-              <Timer />
-            </div>
+    <div className="w-[calc(100%-3.125rem)] md:container mt-30  md:mt-[3.125rem] rounded-normal bg-baseForeground px-15 py-20 md:p-35 overflow-hidden">
+      <div className="flex flex-col">
+        <div className="flex justify-between  md:mb-25 items-start">
+          <div className="flex flex-col justify-center items-start">
+            <h2 className="text-14 md:text-28 font-semibold text-primary-500">
+              Recent Swaps
+            </h2>
+            <p className="text-12 md:text-16 text-neutral-800">
+              Latest 25 swaps on Rango
+            </p>
           </div>
-          <div>
-            <Table data={lastSwaps} />
+          <div className="flex items-center pt-10">
+            <Timer />
           </div>
         </div>
+        <div>
+          <Table data={lastSwaps} />
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -4,6 +4,8 @@ import { getSummary } from 'src/services';
 import Summary from './_components/Summary';
 import ChartBox from './_components/ChartBox';
 import RecentSwaps from './_components/RecentSwaps';
+import TableLoading from 'src/components/common/Table/TableLoading';
+import { Suspense } from 'react';
 
 export const metadata: Metadata = {
   title: 'Track all transactions on Rango Exchange',
@@ -25,7 +27,11 @@ export default async function HomePage() {
           </div>
         </div>
       </div>
-      <RecentSwaps />
+      <div className="pt-[17.68rem] md:pt-[14.68rem] flex justify-center">
+        <Suspense fallback={<TableLoading title="Recent Swaps" />}>
+          <RecentSwaps />
+        </Suspense>
+      </div>
     </div>
   );
 }
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -42,7 +42,7 @@ const Page = async ({
 
   return (
     <div className="w-full flex justify-center">
-      <Suspense fallback={<TableLoading />}>
+      <Suspense fallback={<TableLoading title="Search Results" />}>
         <Result page={Number(page || 0)} query={query as string} />
       </Suspense>
     </div>

diff --git a/src/components/common/Table/Table.type.ts b/src/components/common/Table/Table.type.ts
@@ -21,3 +21,7 @@ export interface ColumnType {
   tokenType?: TokenType;
   component?: React.ComponentType<CellProps>;
 }
+
+export interface TableLoadingProps {
+  title: string;
+}
diff --git a/src/components/common/Table/TableLoading.tsx b/src/components/common/Table/TableLoading.tsx
@@ -2,15 +2,17 @@ import { useId } from 'react';
 import TableHead from './TableHead';
 import { Skeleton } from '../Skeleton';
 import Link from 'next/link';
+import { TableLoadingProps } from './Table.type';
 
-function TableLoading() {
+function TableLoading(props: TableLoadingProps) {
   const id = useId();
+  const { title } = props;
   return (
     <div className="w-[calc(100%-3.125rem)] md:container mt-30  md:mt-[3.125rem] rounded-normal bg-baseForeground  px-15 py-20 md:p-35 overflow-hidden">
       <div className="flex flex-col">
         <div className="flex flex-col justify-center">
           <h2 className="text-14 md:text-28 font-semibold text-primary-500">
-            Search Results
+            {title}
           </h2>
           <div className="text-12 md:text-16 text-neutral-800">
             <Skeleton width={300} height={10} />