switch / path to SSR, fetch copilots on the server and send html to…

… client, to handle large lists
openchatai · Nov 28, 2023 · d1126e5 · d1126e5
1 parent b1b3c9c
commit d1126e5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/dashboard/app/(main)/_parts/CopilotsContainer.tsx b/dashboard/app/(main)/_parts/CopilotsContainer.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React from "react";
 import { BotIcon, Terminal } from "lucide-react";
 import { Link } from "@/lib/router-events";
@@ -8,16 +8,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import useSwr from "swr";
-import { CopilotType, listCopilots } from "@/data/copilot";
-import Loading from "../loading";
+import { CopilotType } from "@/data/copilot";
 import { Filter } from "./Search";
 import _ from "lodash";
 import { EmptyBlock } from "@/components/domain/EmptyBlock";
 import { filterAtom } from "./Search";
 import { useAtomValue } from "jotai";
-import { Button } from "@/components/ui/button";
 import { format } from "timeago.js";
+import { Button } from "@/components/ui/button";
 
 function customSort(list: CopilotType[], sortBy: Filter["sort"]) {
   if (sortBy === "last-viewed") {
@@ -32,18 +30,12 @@ function customSort(list: CopilotType[], sortBy: Filter["sort"]) {
   }
 }
 
-export function CopilotsContainer() {
-  const { data: copilots, isLoading } = useSwr("copilotsList", listCopilots);
+export function CopilotsContainer({ copilots }: {
+  copilots: CopilotType[]
+}) {
   const { sort, query } = useAtomValue(filterAtom);
-
-  if (isLoading && !copilots)
-    return (
-      <div className="flex-center py-4">
-        <Loading />
-      </div>
-    );
   const $copilots = customSort(
-    _.filter(copilots?.data, (item) => item.name.toLowerCase().includes(query)),
+    _.filter(copilots, (item) => item.name.toLowerCase().includes(query)),
     sort,
   );
   return _.isEmpty($copilots) ? (

diff --git a/dashboard/app/(main)/page.tsx b/dashboard/app/(main)/page.tsx
@@ -10,8 +10,13 @@ import { HeaderShell } from "@/components/domain/HeaderShell";
 import { Search } from "./_parts/Search";
 import { Link } from "@/lib/router-events";
 import { CopilotsContainer } from "./_parts/CopilotsContainer";
+import { listCopilots } from "@/data/copilot";
+
+export const dynamic = 'force-dynamic'
+export const revalidate = 0;
 
 export default async function HomePage() {
+  const { data: copilots } = await listCopilots();
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
       <HeaderShell>
@@ -52,7 +57,7 @@ export default async function HomePage() {
           </ClosableDiv>
         </ClosableDivProvider>
         <Search />
-        <CopilotsContainer />
+        <CopilotsContainer copilots={copilots} />
       </div>
     </div>
   );