Merge pull request #23 from merokudao/build-load-reduce

reducing build time load
merokudao · Oct 23, 2023 · 7616c7c · 7616c7c
2 parents 4f1787b + e181669
commit 7616c7c
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 46 deletions.
diff --git a/src/fetch/fetchApps.ts b/src/fetch/fetchApps.ts
@@ -1,10 +1,10 @@
 import { ApiEndpoints } from "../api/constants";
 
-const MEROKU_BASE_URL = process.env.API_HOST;
+const MEROKU_BASE_URL = process.env.NEXT_PUBLIC_API_HOST;
 
 export async function fetchApps() {
 	const res = await fetch(
-		`${MEROKU_BASE_URL}/${ApiEndpoints.APP_LIST}?limit=300`,
+		`${MEROKU_BASE_URL}/${ApiEndpoints.APP_LIST}?limit=100`,
 		{
 			headers: {
 				apiKey: process.env.NEXT_PUBLIC_MEROKU_API_KEY || "",

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,57 +1,89 @@
+import { useEffect, useState } from "react";
 import { AppList, Button, FeaturedLayout, PageLayout } from "../components";
 import { Column } from "../components/layout/flex";
 import { fetchApps } from "../fetch/fetchApps";
 import { fetchCategories } from "../fetch/fetchCategories";
 import { fetchFeatured } from "../fetch/fetchFeatured";
 import { AppStrings } from "./constants";
 
-const Index = ({ categoryList, featuredList, homePageApps }) => {
-	return (
-		<>
-			<FeaturedLayout featuredList={featuredList} />
-			<PageLayout categoryList={categoryList}>
-				<h1 className="text-4xl mb-8 capitalize">
-					{AppStrings.allDapps}
-				</h1>
-				<div className="h-[54px] w-full" />
-				<AppList data={homePageApps} />
-				<div className="w-full my-8">
-					<Column className="flex items-center w-full gap-y-4">
-						<p className="text-md text-center">
-							You have seen a lot of apps. How about exploring
-							specific categories?
-						</p>
-
-						<Button
-							onClick={() => {
-								window.scrollTo({
-									top: 0,
-									behavior: "smooth",
-								});
-							}}
-						>
-							Go to top
-						</Button>
-					</Column>
-				</div>
-			</PageLayout>
-		</>
-	);
+const Index = ({ categoryList, featuredList }) => {
+  const [homePageApps, setHomePageApps] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const buildLoadingItems = (count: number = 10) => {
+    const _items: any[] = [];
+    for (let i = 0; i < count; i++) {
+      _items.push(
+        <div key={i} className="shimmer w-full h-[160px] rounded-lg" />
+      );
+    }
+    return _items;
+  };
+
+  const fetchDapps = async () => {
+    try {
+      setLoading(true);
+      const homePageApp = await fetchApps();
+      setHomePageApps(homePageApp);
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+      console.log;
+    }
+  };
+
+  useEffect(() => {
+    fetchDapps();
+  }, []);
+
+  return (
+    <>
+      <FeaturedLayout featuredList={featuredList} />
+      <PageLayout categoryList={categoryList}>
+        <h1 className="text-4xl mb-8 capitalize">{AppStrings.allDapps}</h1>
+        <div className="h-[54px] w-full" />
+        {loading ? (
+          <div className="grid gap-8 grid-cols-1 md:grid-cols-2 3xl:grid-cols-3">
+            {buildLoadingItems()}
+          </div>
+        ) : (
+          <AppList data={homePageApps} />
+        )}
+        <div className="w-full my-8">
+          <Column className="flex items-center w-full gap-y-4">
+            <p className="text-md text-center">
+              You have seen a lot of apps. How about exploring specific
+              categories?
+            </p>
+
+            <Button
+              onClick={() => {
+                window.scrollTo({
+                  top: 0,
+                  behavior: "smooth",
+                });
+              }}
+            >
+              Go to top
+            </Button>
+          </Column>
+        </div>
+      </PageLayout>
+    </>
+  );
 };
 
 export default Index;
 
 export async function getStaticProps() {
-	const categories = await fetchCategories();
-	const featured = await fetchFeatured();
-	const homePageApps = await fetchApps();
-
-	return {
-		props: {
-			categoryList: categories,
-			featuredList: featured,
-			homePageApps: homePageApps,
-		},
-		revalidate: 86400, // revalidate once every day
-	};
+  const categories = await fetchCategories();
+  const featured = await fetchFeatured();
+
+  return {
+    props: {
+      categoryList: categories,
+      featuredList: featured,
+    },
+    revalidate: 86400, // revalidate once every day
+  };
 }