fix(build): move out suspense boundary

guildxyz · Jul 8, 2024 · d3e85e6 · d3e85e6
1 parent 8577e1a
commit d3e85e6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
@@ -4,7 +4,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup"
 import { Button } from "@/components/ui/Button"
 import { Plus } from "@phosphor-icons/react"
 import useIsStuck from "hooks/useIsStuck"
-import { useEffect } from "react"
+import { Suspense, useEffect } from "react"
 import useScrollspy from "hooks/useScrollSpy"
 import { GuildInfiniteScroll } from "@/components/GuildInfiniteScroll"
 import { GuildSearchBar } from "@/components/GuildSeachBar"
@@ -98,7 +98,9 @@ const Page = () => {
               Explore verified guilds
             </h2>
             <div className="sticky top-10 z-10" ref={searchRef}>
-              <GuildSearchBar queryAtom={guildQueryAtom} />
+              <Suspense>
+                <GuildSearchBar queryAtom={guildQueryAtom} />
+              </Suspense>
             </div>
             <GuildInfiniteScroll queryAtom={guildQueryAtom} />
           </section>

diff --git a/src/v2/components/GuildSeachBar.tsx b/src/v2/components/GuildSeachBar.tsx
@@ -4,7 +4,7 @@ import { MagnifyingGlass, PushPin, Sparkle } from "@phosphor-icons/react"
 import { Input } from "./ui/Input"
 import { ToggleGroup, ToggleGroupItem } from "./ui/ToggleGroup"
 import { PrimitiveAtom, useSetAtom } from "jotai"
-import React, { Suspense, useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { useSearchParams, usePathname } from "next/navigation"
 import { ActiveSection } from "app/explorer/types"
 import useDebouncedState from "hooks/useDebouncedState"
@@ -44,39 +44,37 @@ export const GuildSearchBar = ({
   }, [debouncedSearch, order, setGuildQuery, pathName])
 
   return (
-    <Suspense>
-      <div className="relative flex flex-col gap-3 py-4 sm:flex-row sm:gap-0">
-        <Input
-          className="text-md relative h-12 grow rounded-xl border pl-10 pr-6 sm:rounded-r-none"
-          placeholder="Search verified guilds"
-          onChange={({ currentTarget }) => setSearch(currentTarget.value)}
-          value={search}
-        />
-        <div className="absolute left-4 flex h-12 items-center justify-center">
-          <MagnifyingGlass className="text-muted-foreground" />
-        </div>
-        <ToggleGroup
-          type="single"
-          className="self-start sm:h-12 sm:rounded-r-lg sm:border sm:border-l-0 sm:bg-card sm:px-4"
-          size="sm"
-          variant="outline"
-          onValueChange={(value) => value && setOrder(value as Order)}
-          value={order}
-        >
-          <ToggleGroupItem value={Order.Featured} className="space-x-2" asChild>
-            <a href={`#${ActiveSection.ExploreGuilds}`}>
-              <PushPin />
-              <span>featured</span>
-            </a>
-          </ToggleGroupItem>
-          <ToggleGroupItem value={Order.Newest} className="space-x-2" asChild>
-            <a href={`#${ActiveSection.ExploreGuilds}`}>
-              <Sparkle />
-              <span>newest</span>
-            </a>
-          </ToggleGroupItem>
-        </ToggleGroup>
+    <div className="relative flex flex-col gap-3 py-4 sm:flex-row sm:gap-0">
+      <Input
+        className="text-md relative h-12 grow rounded-xl border pl-10 pr-6 sm:rounded-r-none"
+        placeholder="Search verified guilds"
+        onChange={({ currentTarget }) => setSearch(currentTarget.value)}
+        value={search}
+      />
+      <div className="absolute left-4 flex h-12 items-center justify-center">
+        <MagnifyingGlass className="text-muted-foreground" />
       </div>
-    </Suspense>
+      <ToggleGroup
+        type="single"
+        className="self-start sm:h-12 sm:rounded-r-lg sm:border sm:border-l-0 sm:bg-card sm:px-4"
+        size="sm"
+        variant="outline"
+        onValueChange={(value) => value && setOrder(value as Order)}
+        value={order}
+      >
+        <ToggleGroupItem value={Order.Featured} className="space-x-2" asChild>
+          <a href={`#${ActiveSection.ExploreGuilds}`}>
+            <PushPin />
+            <span>featured</span>
+          </a>
+        </ToggleGroupItem>
+        <ToggleGroupItem value={Order.Newest} className="space-x-2" asChild>
+          <a href={`#${ActiveSection.ExploreGuilds}`}>
+            <Sparkle />
+            <span>newest</span>
+          </a>
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
   )
 }