Fix bug with repository snapshot

packages/web/src/app/[domain]/components/repositorySnapshot.tsx

@@ -13,63 +13,9 @@ import {
     CarouselContent,
     CarouselItem,
 } from "@/components/ui/carousel";
-import { Plus } from "lucide-react";
 import { RepoIndexingStatus } from "@sourcebot/db";
 import { SymbolIcon } from "@radix-ui/react-icons";
 
-export function EmptyRepoState({ domain }: { domain: string }) {
-    return (
-      <div className="flex flex-col items-center gap-3">
-        <span className="text-sm">No repositories found</span>
-  
-        <div className="w-full max-w-lg">
-          <div className="flex flex-row items-center gap-2 border rounded-md p-4 justify-center">
-            <span className="text-sm text-muted-foreground">
-              Create a{" "}
-              <Link href={`/${domain}/connections`} className="text-blue-500 hover:underline inline-flex items-center gap-1">
-                connection
-              </Link>{" "}
-              to start indexing repositories
-            </span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-export default function RepoSkeleton() {
-    return (
-      <div className="flex flex-col items-center gap-3">
-        {/* Skeleton for "Search X repositories" text */}
-        <div className="flex items-center gap-1 text-sm">
-          <Skeleton className="h-4 w-14" /> {/* "Search X" */}
-          <Skeleton className="h-4 w-24" /> {/* "repositories" */}
-        </div>
-  
-        {/* Skeleton for repository carousel */}
-        <Carousel
-          opts={{
-            align: "start",
-            loop: true,
-          }}
-          className="w-full max-w-lg"
-        >
-          <CarouselContent>
-            {[1, 2, 3].map((_, index) => (
-              <CarouselItem key={index} className="basis-auto">
-                <div className="flex flex-row items-center gap-2 border rounded-md p-2">
-                  <Skeleton className="h-4 w-4 rounded-sm" /> {/* Icon */}
-                  <Skeleton className="h-4 w-32" /> {/* Repository name */}
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-        </Carousel>
-      </div>
-    )
-  }
-
-
 export function RepositorySnapshot() {
     const domain = useDomain();
 
@@ -88,7 +34,7 @@ export function RepositorySnapshot() {
     }
 
     const indexedRepos = repos.filter((repo) => repo.repoIndexingStatus === RepoIndexingStatus.INDEXED);
-    if (repos.length === 0 || indexedRepos.length === 0) {
+    if (repos.length === 0) {
         return (
             <EmptyRepoState domain={domain} />
         )
@@ -119,4 +65,56 @@ export function RepositorySnapshot() {
             <RepositoryCarousel repos={indexedRepos} />
         </div>
     )
-}
+}
+
+function EmptyRepoState({ domain }: { domain: string }) {
+    return (
+        <div className="flex flex-col items-center gap-3">
+            <span className="text-sm">No repositories found</span>
+
+            <div className="w-full max-w-lg">
+                <div className="flex flex-row items-center gap-2 border rounded-md p-4 justify-center">
+                    <span className="text-sm text-muted-foreground">
+                        Create a{" "}
+                        <Link href={`/${domain}/connections`} className="text-blue-500 hover:underline inline-flex items-center gap-1">
+                            connection
+                        </Link>{" "}
+                        to start indexing repositories
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function RepoSkeleton() {
+    return (
+        <div className="flex flex-col items-center gap-3">
+            {/* Skeleton for "Search X repositories" text */}
+            <div className="flex items-center gap-1 text-sm">
+                <Skeleton className="h-4 w-14" /> {/* "Search X" */}
+                <Skeleton className="h-4 w-24" /> {/* "repositories" */}
+            </div>
+
+            {/* Skeleton for repository carousel */}
+            <Carousel
+                opts={{
+                    align: "start",
+                    loop: true,
+                }}
+                className="w-full max-w-lg"
+            >
+                <CarouselContent>
+                    {[1, 2, 3].map((_, index) => (
+                        <CarouselItem key={index} className="basis-auto">
+                            <div className="flex flex-row items-center gap-2 border rounded-md p-2">
+                                <Skeleton className="h-4 w-4 rounded-sm" /> {/* Icon */}
+                                <Skeleton className="h-4 w-32" /> {/* Repository name */}
+                            </div>
+                        </CarouselItem>
+                    ))}
+                </CarouselContent>
+            </Carousel>
+        </div>
+    )
+}

packages/web/src/app/[domain]/page.tsx

@@ -1,11 +1,6 @@
-import { listRepositories } from "@/lib/server/searchService";
-import { isServiceError } from "@/lib/utils";
-import { Suspense } from "react";
 import { NavigationMenu } from "./components/navigationMenu";
-import { RepositoryCarousel } from "./components/repositoryCarousel";
 import { SearchBar } from "./components/searchBar";
 import { Separator } from "@/components/ui/separator";
-import { SymbolIcon } from "@radix-ui/react-icons";
 import { UpgradeToast } from "./components/upgradeToast";
 import Link from "next/link";
 import { getOrgFromDomain } from "@/data/org";
@@ -37,9 +32,7 @@ export default async function Home({ params: { domain } }: { params: { domain: s
                     className="mt-4 w-full max-w-[800px]"
                 />
                 <div className="mt-8">
-                    <Suspense fallback={<div>...</div>}>
+                    <RepositorySnapshot />
-                        <RepositorySnapshot />
-                    </Suspense>
                 </div>
                 <div className="flex flex-col items-center w-fit gap-6">
                     <Separator className="mt-5" />