Tweaks

app/bookmarks/_components/bookmarks.tsx

@@ -5,11 +5,13 @@ import { useEffect, useState } from "react";
 import { fetchAllProjects } from "@/lib/near-catalog";
 import { ProjectId, ProjectRecord } from "@/lib/types";
 import ProjectCard from "@/components/ui/project-card";
+import ErrorImage from "@/public/assets/images/error.webp";
 import { getBookmarkedProjects } from "@/lib/bookmark-project";
+import ProjectSkeleton from "@/components/ui/project-skeleton";
 
 export default function Bookmarks() {
   const [projects, setProjects] = useState<Record<string, ProjectRecord>>();
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [starredProjects, setStarredProjects] = useState<ProjectId[]>([]);
 
   useEffect(() => {
@@ -26,31 +28,32 @@ export default function Bookmarks() {
 
   return (
     <>
-      {starredProjects.length === 0 ? (
-        <div className="my-32 flex flex-col items-center justify-center gap-4 font-medium text-[#BEBDBE]">
-          <Image
-            src={"/assets/images/error.webp"}
-            alt={"Not found error"}
-            width={182}
-            height={144}
-          />
-          <h2>No bookmarked projects found</h2>
-        </div>
-      ) : (
-        <>
-          {loading || !projects ? (
-            <div className="my-32 flex flex-col items-center justify-center gap-4 font-medium text-[#BEBDBE]">
-              <i className="bi bi-arrow-repeat animate-spin text-2xl"></i>
-            </div>
-          ) : (
-            <div className="mt-4 grid max-w-full grid-cols-1 place-items-center items-stretch gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-              {starredProjects.map((pid: ProjectId) => (
-                <ProjectCard key={pid} project={projects[pid]} maxWidth />
-              ))}
+      {loading
+        ? null
+        : starredProjects.length === 0 && (
+            <div className="mt-8 flex flex-col items-center justify-center gap-4 font-medium text-[#BEBDBE]">
+              <Image
+                src={ErrorImage}
+                alt={"Not found error"}
+                width={182}
+                placeholder="blur"
+                height={144}
+              />
+              <h2>No bookmarked projects found</h2>
             </div>
           )}
-        </>
-      )}
+      <div className="projects mt-8 grid max-w-full grid-cols-1 place-items-center items-stretch gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {starredProjects.length > 0 &&
+          typeof projects === "object" &&
+          starredProjects.map((pid: ProjectId) => (
+            <ProjectCard key={pid} project={projects[pid]} maxWidth />
+          ))}
+        {loading
+          ? Array.from({ length: 4 }).map((_, index) => (
+              <ProjectSkeleton key={index} />
+            ))
+          : null}
+      </div>
     </>
   );
 }

app/category/[cid]/_components/category-projects-list.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { ProjectId, ProjectRecord } from "@/lib/types";
+import ProjectsList from "@/components/ui/project-list";
+import { useSearchStore } from "@/store/search-store";
+
+const ITEMS_PER_PAGE = 12;
+
+interface CategoryProjectsListProps {
+  projects: Record<ProjectId, ProjectRecord>;
+}
+
+export default function CategoryProjectsList({
+  projects,
+}: CategoryProjectsListProps) {
+  const [projectsList, setProjectsList] = useState<ProjectRecord[]>([]);
+  const [displayedProjects, setDisplayedProjects] = useState<ProjectRecord[]>(
+    [],
+  );
+  const { setTags, setSearchKey } = useSearchStore();
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    setProjectsList(Object.values(projects));
+    setTags([]);
+    setSearchKey("");
+  }, [projects, setTags, setSearchKey]);
+
+  useEffect(() => {
+    const endIndex = page * ITEMS_PER_PAGE;
+    setDisplayedProjects(projectsList.slice(0, endIndex));
+    setHasMore(endIndex < projectsList.length);
+  }, [projectsList, page]);
+
+  useEffect(() => {
+    if (inView && hasMore) {
+      setPage((prevPage) => prevPage + 1);
+    }
+  }, [inView, hasMore]);
+
+  return (
+    <>
+      <ProjectsList projects={displayedProjects} />
+      {hasMore && <div ref={ref} style={{ height: "20px" }}></div>}
+    </>
+  );
+}

app/category/[cid]/loading.tsx

@@ -1,27 +1,6 @@
 import Image from "next/image";
 import SearchImage from "@/public/assets/images/search.webp";
-
-const ProjectSkeleton = ({ maxWidth }: { maxWidth?: boolean }) => {
-  return (
-    <div
-      className={`grow-1 h-92 flex w-full ${maxWidth ? "" : "max-w-[20rem]"} shrink-0 animate-pulse flex-col items-start justify-start gap-3 rounded-[2rem] bg-[#11141B] px-8 py-7`}
-      style={{ userSelect: "none" }}
-    >
-      <div className="flex h-full w-full items-center gap-2 md:h-auto md:flex-col md:items-start">
-        <div className="size-[6rem] h-24 w-24 shrink-0 rounded-full bg-gray-700 md:size-[7.5rem]"></div>
-        <div className="flex w-full flex-col gap-1">
-          <div className="h-8 w-3/4 rounded-md bg-gray-700"></div>
-        </div>
-      </div>
-      <div className="h-4 w-5/6 rounded-md bg-gray-700"></div>
-      <div className="mt-auto flex w-full flex-wrap items-center gap-2">
-        <div className="h-6 w-16 rounded-full bg-gray-700"></div>
-        <div className="h-6 w-16 rounded-full bg-gray-700"></div>
-        <div className="h-6 w-16 rounded-full bg-gray-700"></div>
-      </div>
-    </div>
-  );
-};
+import ProjectSkeleton from "@/components/ui/project-skeleton";
 
 export default function LoadingPage() {
   return (
@@ -30,15 +9,18 @@ export default function LoadingPage() {
         className="absolute right-1/2 top-0 z-0 h-[8.75rem] w-[13.75rem] -translate-y-1/3 translate-x-1/2 object-cover md:right-0 md:h-[13.875rem] md:w-[21.6875rem] md:translate-x-0"
         src={SearchImage}
         alt={"Discover All Projects"}
+        placeholder="blur"
         width={347}
+        loading="lazy"
         height={222}
+        sizes="(min-width: 768px) 221px, 347px"
       />
       <div className="flex animate-pulse flex-col items-center justify-center gap-3 px-2">
         <div className="h-10 w-1/2 rounded-md bg-gray-700 md:h-12"></div>
       </div>
       <div className="mt-4 grid max-w-full grid-cols-1 place-items-center items-stretch gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {Array.from({ length: 4 }).map((_, index) => (
-          <ProjectSkeleton key={index} maxWidth />
+          <ProjectSkeleton key={index} />
         ))}
       </div>
     </div>

app/category/[cid]/page.tsx

@@ -1,9 +1,10 @@
-import ProjectCard from "@/components/ui/project-card";
 import SectionHeading from "@/components/ui/section-heading";
 import { fetchProjectCategory } from "@/lib/near-catalog";
 import { ProjectCategory } from "@/lib/types";
 import SearchImage from "@/public/assets/images/search.webp";
+import ErrorImage from "@/public/assets/images/error.webp";
 import Image from "next/image";
+import CategoryProjectsList from "./_components/category-projects-list";
 
 interface CategoryPageProps {
   params: {
@@ -45,10 +46,13 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
     return (
       <div className="my-32 flex flex-col items-center justify-center gap-4 font-medium text-[#BEBDBE]">
         <Image
-          src={"/assets/images/error.webp"}
+          src={ErrorImage}
           alt={"Not found error"}
           width={182}
+          priority
+          placeholder="blur"
           height={144}
+          sizes="182px"
         />
         <h2>Sorry, we could not find the category:</h2>
         <p className="text-2xl uppercase">{cid}</p>
@@ -57,23 +61,24 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
   }
 
   return (
-    <main className="container relative mx-auto flex flex-col gap-4 px-4 py-12">
+    <main className="container relative mx-auto px-4 py-12">
       <Image
         className="absolute right-1/2 top-0 z-0 h-[8.8125rem] w-[13.8125rem] -translate-y-1/3 translate-x-1/2 object-cover md:right-0 md:h-[13.875rem] md:w-[21.6875rem] md:translate-x-0"
         src={SearchImage}
         alt={"Discover All Projects"}
         style={{ userSelect: "none" }}
+        placeholder="blur"
         width={347}
+        priority
         height={222}
+        sizes="(min-width: 768px) 221px, 347px"
       />
-      <SectionHeading
-        title={categoryData.cat_title}
-        description={categoryData.cat_description}
-      />
-      <div className="projects mt-4 grid max-w-full grid-cols-1 place-items-center items-stretch gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-        {Object.values(categoryData.data).map((project: any) => (
-          <ProjectCard key={project.slug} project={project} maxWidth />
-        ))}
+      <div className="projects relative z-[1] flex flex-col gap-4">
+        <SectionHeading
+          title={categoryData.cat_title}
+          description={categoryData.cat_description}
+        />
+        <CategoryProjectsList projects={categoryData.data} />
       </div>
     </main>
   );

app/project/[pid]/_components/discover-more.tsx

@@ -1,6 +1,7 @@
 import { fetchRelatedProjects } from "@/lib/near-catalog";
 import Image from "next/image";
 import Link from "next/link";
+import ErrorImage from "@/public/assets/images/error.webp";
 
 interface DiscoverMoreProps {
   pid: string;
@@ -20,7 +21,7 @@ function ProjectCard({ project }: { project: any }) {
         width={64}
         height={64}
       />
-      <div className="flex flex-col gap-1">
+      <div className="flex flex-col gap-1 overflow-hidden">
         <h3 className="text-base font-bold">{project.profile.name}</h3>
         <p className="text-sm font-medium">{project.profile.tagline}</p>
       </div>
@@ -38,9 +39,10 @@ export default async function DiscoverMore({
     return (
       <div className="flex flex-col items-center justify-center gap-4 font-medium text-[#BEBDBE]">
         <Image
-          src={"/assets/images/error.webp"}
+          src={ErrorImage}
           alt={"Not found error"}
           width={182}
+          placeholder="blur"
           height={144}
         />
         <h2>Sorry, we could not find the results for:</h2>

app/project/[pid]/_components/share-dropdown.tsx

@@ -20,6 +20,7 @@ export default function ShareDropdown({ project }: ShareDropdownProps) {
     <>
       <button
         onClick={toggleOpen}
+        aria-label="Share dropdown"
         className={`flex items-center justify-center gap-1 rounded-lg px-2 py-1 text-xs font-bold text-[#80E9E5] transition-opacity duration-300 ease-in-out hover:opacity-50 ${open ? "bg-[#80E9E5]/40 text-black" : ""}`}
       >
         <i className="bi bi-three-dots-vertical text-xl text-[#80E9E5]"></i>
@@ -28,7 +29,7 @@ export default function ShareDropdown({ project }: ShareDropdownProps) {
         <div className="absolute right-0 top-full mt-2 flex w-fit flex-col gap-2 rounded-lg bg-[#1c1b2a] p-2 shadow-lg ring-1 ring-white ring-opacity-5 focus:outline-none">
           <div className="flex min-w-fit shrink-0">
             <Link
-              href={`https://x.com/intent/post?text=Check out ${project.profile.name} - ${project.profile.tagline}%0A${site.url}project/${project.slug}%0A📒@nearcatalog`}
+              href={`https://x.com/intent/post?text=Check out ${project.profile.name} - ${project.profile.tagline}%0A${site.url}/project/${project.slug}%0A📒@nearcatalog`}
               target="_blank"
               className="flex w-full shrink-0 items-center gap-1 rounded-lg px-2 py-1 hover:bg-[#80E9E5]/40"
             >

app/project/[pid]/_components/twitter-embed.tsx

@@ -33,12 +33,17 @@ export default function TwitterTimelineEmbed({
           data-height="500"
           data-tweet-limit="10"
           href={href}
+          aria-label="Twitter Timeline"
         >
           <div className="my-4 flex flex-col items-center justify-center gap-2">
             <Loader />
           </div>
         </a>
-        <Script defer src="https://platform.twitter.com/widgets.js" />
+        <Script
+          async
+          src="https://platform.twitter.com/widgets.js"
+          strategy="beforeInteractive"
+        />
       </div>
     </div>
   );

app/project/[pid]/page.tsx

@@ -7,6 +7,7 @@ import ProjectHeader from "./_components/project-header";
 import TokenInfo from "./_components/token-info";
 import TwitterTimelineEmbed from "./_components/twitter-embed";
 import Markdown from "react-markdown";
+import ErrorImage from "@/public/assets/images/error.webp";
 
 interface ProjectPageProps {
   params: {
@@ -22,10 +23,11 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
     return (
       <div className="my-32 flex flex-col items-center justify-center gap-4 font-medium text-[#BEBDBE]">
         <Image
-          src={"/assets/images/error.webp"}
+          src={ErrorImage}
           alt={"Not found error"}
           width={182}
           height={144}
+          placeholder="blur"
         />
         <h2>Sorry, we could not find the results for:</h2>
         <p className="text-2xl uppercase">{pid}</p>

app/sitemap.ts

@@ -18,24 +18,30 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const uniqueTags = Array.from(new Set(tags)).sort();
 
   const projectRoutes = projectSlugs.map((slug) => ({
-    url: `${BASE_URL}project/${slug}`,
+    url: `${BASE_URL}/project/${slug}`,
     lastModified: new Date(),
     priority: 0.5,
   }));
 
   const categoryRoutes = uniqueTags.map((slug) => ({
-    url: `${BASE_URL}category/${slug}`,
+    url: `${BASE_URL}/category/${slug}`,
     lastModified: new Date(),
     priority: 0.5,
   }));
 
   return [
     {
-      url: `${BASE_URL}`,
+      url: `${BASE_URL}/`,
       priority: 0.9,
       // changeFrequency: "always",
       lastModified: new Date(),
     },
+    {
+      url: `${BASE_URL}/bookmarks`,
+      priority: 0.5,
+      // changeFrequency: "always",
+      lastModified: new Date(),
+    },
     ...projectRoutes,
     ...categoryRoutes,
   ];

components/home/discover.tsx

@@ -35,6 +35,7 @@ export default async function Discover() {
           className="absolute right-1/2 top-0 z-0 h-[8.8125rem] w-[13.8125rem] -translate-y-1/3 translate-x-1/2 object-cover md:right-0 md:h-[13.875rem] md:w-[21.6875rem] md:translate-x-0"
           src={SearchImage}
           alt={"Discover All Projects"}
+          placeholder="blur"
           width={347}
           height={222}
         />

components/home/ecosystem.tsx

@@ -13,8 +13,13 @@ export default function EcosystemSupport() {
         src={Mountains}
         alt={"Mountains"}
         priority
-        sizes="(max-width: 768px) 100vw, 1200px"
+        placeholder="blur"
         className="absolute left-0 top-0 z-[0] h-full w-full object-cover"
+        sizes="100vw"
+        style={{
+          maskImage:
+            "linear-gradient(to bottom, rgba(0,0,0,0), rgba(0, 0, 0, 1) ,rgba(0,0,0,0))",
+        }}
       />
       <div className="container z-[1] mx-auto flex flex-col items-center justify-center gap-12">
         <SectionHeading

components/home/ecosystem/project.tsx

@@ -53,7 +53,8 @@ export default function Project({ pid }: ProjectProps) {
       : description;
 
   return (
-    <div
+    <button
+      role="link"
       onClick={() => router.push(`/project/${pid}#top`, { scroll: true })}
       className="flex w-full max-w-60 shrink-0 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg bg-black p-4 pt-2"
       style={{
@@ -73,6 +74,6 @@ export default function Project({ pid }: ProjectProps) {
       <p className="max-w-full text-center text-xs font-medium text-[#7E7E7E]">
         {truncatedDescription}
       </p>
-    </div>
+    </button>
   );
 }