improved UX + improved performance

pages/dashboard.tsx

@@ -168,10 +168,7 @@ export default function Dashboard() {
         >
           {links[0] ? (
             <div className="w-full">
-              <LinkComponent
-                links={links.slice(0, showLinks)}
-                showCheckbox={false}
-              />
+              <LinkComponent links={links.slice(0, showLinks)} />
             </div>
           ) : (
             <div
@@ -282,7 +279,6 @@ export default function Dashboard() {
           {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
             <div className="w-full">
               <LinkComponent
-                showCheckbox={false}
                 links={links
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
                   .slice(0, showLinks)}

pages/public/collections/[id].tsx

@@ -60,8 +60,8 @@ export default function PublicCollections() {
     name: true,
     url: true,
     description: true,
-    textContent: true,
     tags: true,
+    textContent: false,
   });
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);

pages/search.tsx

@@ -5,12 +5,13 @@ import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import PageHeader from "@/components/PageHeader";
+import { GridLoader, PropagateLoader } from "react-spinners";
 
 export default function Search() {
   const { links } = useLinkStore();
@@ -21,8 +22,8 @@ export default function Search() {
     name: true,
     url: true,
     description: true,
-    textContent: true,
     tags: true,
+    textContent: false,
   });
 
   const [viewMode, setViewMode] = useState<string>(
@@ -30,7 +31,7 @@ export default function Search() {
   );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
-  useLinks({
+  const { isLoading } = useLinks({
     sort: sortBy,
     searchQueryString: decodeURIComponent(router.query.q as string),
     searchByName: searchFilter.name,
@@ -40,6 +41,10 @@ export default function Search() {
     searchByTags: searchFilter.tags,
   });
 
+  useEffect(() => {
+    console.log("isLoading", isLoading);
+  }, [isLoading]);
+
   const linkView = {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
@@ -51,7 +56,7 @@ export default function Search() {
 
   return (
     <MainLayout>
-      <div className="p-5 flex flex-col gap-5 w-full">
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
         <div className="flex justify-between">
           <PageHeader icon={"bi-search"} title={"Search Results"} />
 
@@ -67,15 +72,24 @@ export default function Search() {
           </div>
         </div>
 
-        {links[0] ? (
-          <LinkComponent links={links} />
-        ) : (
+        {!isLoading && !links[0] ? (
           <p>
             Nothing found.{" "}
             <span className="font-bold text-xl" title="Shruggie">
               ¯\_(ツ)_/¯
             </span>
           </p>
+        ) : links[0] ? (
+          <LinkComponent links={links} isLoading={isLoading} />
+        ) : (
+          isLoading && (
+            <GridLoader
+              color="oklch(var(--p))"
+              loading={true}
+              size={20}
+              className="m-auto py-10"
+            />
+          )
         )}
       </div>
     </MainLayout>