diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/components/InfiniteScrollGuilds.tsx index 2788adaf29..37997fe88c 100644 --- a/src/app/explorer/components/InfiniteScrollGuilds.tsx +++ b/src/app/explorer/components/InfiniteScrollGuilds.tsx @@ -1,6 +1,8 @@ "use client"; import { Button } from "@/components/ui/Button"; +import { Card } from "@/components/ui/Card"; +import { Skeleton } from "@/components/ui/Skeleton"; import { env } from "@/lib/env"; import { useInfiniteQuery } from "@tanstack/react-query"; import { useIntersection } from "foxact/use-intersection"; @@ -23,7 +25,7 @@ export const InfiniteScrollGuilds = () => { [search], ); - const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = + const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteQuery({ queryKey: ["guilds", search], queryFn: fetchGuilds, @@ -51,16 +53,15 @@ export const InfiniteScrollGuilds = () => { return (
-

Explore guilds

- {guilds && guilds.length > 0 ? ( -
- {guilds.map((guild) => ( - - ))} -
- ) : ( -

Couldn't fetch guilds

- )} +
+ {isLoading + ? Array.from({ length: 33 }, (_, i) => ( + + + + )) + : guilds?.map((guild) => )} +
{ diff --git a/src/app/explorer/components/Search.tsx b/src/app/explorer/components/Search.tsx index 395539cf62..9205e4e5b9 100644 --- a/src/app/explorer/components/Search.tsx +++ b/src/app/explorer/components/Search.tsx @@ -3,12 +3,11 @@ import { Input } from "@/components/ui/Input"; import { useDebouncedValue } from "foxact/use-debounced-value"; import { useSetAtom } from "jotai"; -import { usePathname, useRouter, useSearchParams } from "next/navigation"; +import { usePathname, useSearchParams } from "next/navigation"; import { useEffect, useState } from "react"; import { searchAtom } from "../atoms"; export const Search = () => { - const router = useRouter(); const searchParams = useSearchParams(); const pathname = usePathname(); const [value, setValue] = useState( @@ -17,6 +16,7 @@ export const Search = () => { const debouncedValue = useDebouncedValue(value, 200); const setSearch = useSetAtom(searchAtom); + useEffect(() => { setSearch(debouncedValue); }, [debouncedValue]); @@ -25,10 +25,11 @@ export const Search = () => { const newSearchParams = new URLSearchParams( Object.entries({ search: value }).filter(([_, value]) => value), ); - - router.replace(`${pathname}?${newSearchParams.toString()}`, { - scroll: false, - }); + window.history.replaceState( + null, + "", + `${pathname}?${newSearchParams.toString()}`, + ); }, [value]); return ( diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx index e67ca39797..167675bb07 100644 --- a/src/app/explorer/page.tsx +++ b/src/app/explorer/page.tsx @@ -39,7 +39,7 @@ export default function Explorer() {
- + ); }