update: add trending category + pagination to load fast the page

components/pagination.tsx

@@ -0,0 +1,40 @@
+import { SpaceProps } from "@/utils/type";
+import { MAX_ITEMS_PER_PAGE } from "./spaces";
+
+export const Pagination = ({
+  spaces,
+  page,
+  handleNextPage,
+  handlePrevPage,
+}: {
+  spaces: SpaceProps[];
+  page: number;
+  handleNextPage: () => void;
+  handlePrevPage: () => void;
+}) => {
+  const max_pages = Math.ceil(spaces.length / MAX_ITEMS_PER_PAGE);
+
+  return (
+    <footer className="flex justify-between max-w-2xl mx-auto my-auto w-full p-3 sticky items-center bottom-3 bg-white dark:bg-slate-950 dark:border-slate-800 shadow-lg shadow-black/5 border border-zinc-200 rounded-full z-[9999]">
+      <button
+        disabled={page === 0}
+        className="flex items-center gap-2.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 rounded-full px-3 py-1.5 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:!bg-transparent"
+        onClick={handlePrevPage}
+      >
+        <span className="max-lg:hidden">←</span>
+        <span>Previous</span>
+      </button>
+      <p className="text-gray-500/70">
+        Page {page + 1} of {max_pages}
+      </p>
+      <button
+        disabled={page === max_pages - 1}
+        className="flex items-center gap-2.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 rounded-full px-3 py-1.5 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:!bg-transparent"
+        onClick={handleNextPage}
+      >
+        <span>Next</span>
+        <span className="max-lg:hidden">→</span>
+      </button>
+    </footer>
+  );
+};

components/sort.tsx

@@ -3,12 +3,25 @@ import { TiHeartFullOutline } from "react-icons/ti";
 import { MdCalendarToday } from "react-icons/md";
 
 interface Props {
-  value: "likes" | "createdAt";
-  onChange: (s: "createdAt" | "likes") => void;
+  value: "likes" | "createdAt" | "trending";
+  onChange: (s: "createdAt" | "likes" | "trending") => void;
 }
 export const Sort = ({ value, onChange }: Props) => {
   return (
     <div className="flex items-center justify-center border-[3px] rounded-full border-gray-50 drop-shadow-sm bg-gray-100 dark:bg-slate-900 dark:border-slate-800 ring-[1px] ring-gray-200 dark:ring-slate-700 gap-1">
+      <button
+        className={classNames(
+          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 dark:hover:bg-gray-700/70 flex items-center justify-center gap-2",
+          {
+            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":
+              value === "trending",
+          }
+        )}
+        onClick={() => onChange("trending")}
+      >
+        <TiHeartFullOutline className="w-3.5 h-3.5" />
+        Trending
+      </button>
       <button
         className={classNames(
           "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 dark:hover:bg-gray-700/70 flex items-center justify-center gap-2",

components/spaces/index.tsx

@@ -8,15 +8,22 @@ import { SpaceProps } from "@/utils/type";
 import { SpaceIcon } from "@/components/space_icon";
 import { Space } from "@/components/spaces/space";
 import { Sort } from "@/components/sort";
+import { Pagination } from "@/components/pagination";
+import { useUpdateEffect } from "react-use";
+
+export const MAX_ITEMS_PER_PAGE = 60;
 
 export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
-  const { systemTheme, theme, setTheme } = useTheme();
-  const currentTheme = theme === "system" ? systemTheme : theme;
+  const { theme, setTheme } = useTheme();
 
   const [selectedGpu, setSelectedGpu] = useState<string | undefined>(undefined);
   const router = useRouter();
-  const [sort, setSort] = useState<"likes" | "createdAt">("likes");
+  const [sort, setSort] = useState<"likes" | "createdAt" | "trending">(
+    "trending"
+  );
   const [searchQuery, setSearchQuery] = useState<string>("");
+  const [page, setPage] = useState<number>(0);
+  const [filteredSpaces, setFilteredSpaces] = useState<SpaceProps[]>([]);
 
   useEffect(() => {
     router.push("/?sort=" + sort);
@@ -30,21 +37,33 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
     setSelectedGpu(gpu);
   };
 
-  const filteredSpaces = useMemo(() => {
-    if (!searchQuery) return spaces;
-    return spaces.filter(
-      (space) =>
-        space.title?.toLowerCase().includes(searchQuery.trim().toLowerCase()) ||
-        space.authorData?.name
-          ?.toLowerCase()
-          .includes(searchQuery.trim().toLowerCase())
+  useUpdateEffect(() => {
+    return setFilteredSpaces(
+      spaces.filter(
+        (space) =>
+          space.title
+            ?.toLowerCase()
+            .includes(searchQuery.trim().toLowerCase()) ||
+          space.authorData?.name
+            ?.toLowerCase()
+            .includes(searchQuery.trim().toLowerCase())
+      )
     );
   }, [spaces, searchQuery]);
 
+  useUpdateEffect(() => {
+    const app = document.getElementById("app");
+    app?.scrollTo({ top: 0, behavior: "smooth" });
+
+    const start = page * MAX_ITEMS_PER_PAGE;
+    const end = start + MAX_ITEMS_PER_PAGE;
+    setFilteredSpaces(spaces.slice(start, end));
+  }, [page, spaces]);
+
   return (
-    <section className="flex h-screen overflow-auto">
+    <section id="app" className="flex h-screen overflow-auto">
       <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
-        <header className="max-w-5xl mx-auto w-full max-lg:flex-col items-start flex lg:items-end lg:justify-between gap-4">
+        <header className="max-w-5xl mx-auto w-full flex-col items-start flex gap-5 lg:gap-10">
           <div>
             <div className="mb-6 flex items-center justify-start gap-2.5">
               <button
@@ -61,7 +80,7 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
               </button>
               <div className="font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 dark:text-slate-400 dark:bg-slate-900 dark:border-slate-800 px-3 py-2 transition-all duration-300">
                 <SpaceIcon className="inline-block w-4 h-4 mr-2 drop-shadow-lg" />
-                Browse {filteredSpaces.length} spaces
+                Browse {spaces.length} spaces
               </div>
             </div>
             <h1 className="font-extrabold text-3xl text-black dark:text-slate-100">
@@ -71,7 +90,7 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
               Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
             </p>
           </div>
-          <div className="flex items-center justify-end gap-2">
+          <div className="flex items-center justify-between gap-2 max-lg:flex-col max-lg:items-start max-lg:gap-3 w-full">
             <div className="relative">
               <MdSearch className="absolute left-2.5 top-2.5 w-5 h-5 text-gray-600 dark:text-slate-400 z-[1]" />
               <input
@@ -85,7 +104,7 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
             <Sort value={sort} onChange={setSort} />
           </div>
         </header>
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pb-10">
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
           {filteredSpaces.length === 0 && (
             <div className="col-span-full flex items-center flex-col justify-center gap-2">
               <p className="text-neutral-500 font-regular text-base dark:text-slate-300">
@@ -96,6 +115,7 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
                 onClick={() => {
                   setSearchQuery("");
                   setSelectedGpu(undefined);
+                  setPage(0);
                 }}
               >
                 Reset filters
@@ -111,6 +131,12 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
             />
           ))}
         </div>
+        <Pagination
+          spaces={spaces}
+          page={page}
+          handleNextPage={() => setPage(page + 1)}
+          handlePrevPage={() => setPage(page - 1)}
+        />
       </div>
     </section>
   );

utils/index.ts

@@ -13,7 +13,7 @@ export const fetchAllPages = async (sort = "trending") => {
 
   const jsonResponses = await Promise.all(urls);
   const spaces = jsonResponses.flat();
-  return spaces;
+  return spaces
 };
 
 export const sortByCreatedAt = (spaces: SpaceProps[]) => {