fix(openai-search): loading icon no loading

src/app/[lang]/pokedex/OpenAISearch.tsx

@@ -2,11 +2,12 @@ import * as React from "react"
 import { useFetchPokemonMquery } from "@/api/query"
 import { msg } from "@lingui/macro"
 import { useLingui } from "@lingui/react"
-import { Loader2, Search } from "lucide-react"
+import { Search } from "lucide-react"
 import * as R from "remeda"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { LoadingSpinner } from "@/components/ui/loading-spinner"
 
 export interface OpenAISearchProps {
   mquery?: any
@@ -34,7 +35,7 @@ export const OpenAISearch = ({ mquery, onChange }: OpenAISearchProps) => {
 
   const sampleQuestions = [
     msg`Fairy and Psychic dual-type with at least 125 Special Attack and 100 Special Defense, knowing Psychic or Moonblast.`,
-    msg`Not a Fire-type, but can Flamethrower, Special Attack is at least 90, Speed is 80 or higher`
+    msg`Not a Fire-type, but can Flamethrower, Special Attack is at least 90, Speed is 80 or higher`,
   ]
 
   return (
@@ -55,13 +56,14 @@ export const OpenAISearch = ({ mquery, onChange }: OpenAISearchProps) => {
           disabled={query.isLoading}
         />
         <Button disabled={query.isLoading} onClick={() => setEnableQuery(true)}>
-          {query.isLoading ? <Loader2 /> : <Search />}
+          {query.isLoading ? <LoadingSpinner /> : <Search />}
         </Button>
       </div>
-      <div className="flex gap-1">
+      <div className="flex flex-wrap gap-1">
         {sampleQuestions.map((question, i) => (
           <Button
             key={`sampleQuestions[${i}]`}
+            className="md:max-w-[50%] whitespace-normal"
             variant="outline"
             onClick={() => {
               setEnableQuery(true)

src/app/[lang]/pokedex/PokedexPage.tsx

@@ -307,7 +307,11 @@ export function PokedexPageBase() {
   const { downloadJSON } = useDownloadJSON(data, "pokedex")
 
   if (query.isLoading) {
-    return <Skeleton className="w-100% h-[500px]" />
+    return (
+      <div className="md:container flex flex-col gap-2 py-6">
+        <Skeleton className="w-100% h-[500px]" />
+      </div>
+    )
   }
 
   return (

src/components/MobileNav.tsx

@@ -40,7 +40,6 @@ export function MobileNav() {
           <Icons.logo className="mr-2 h-4 w-4" />
           <span className="font-bold">{i18n._(siteConfig.name)}</span>
         </MobileLink>
-
         <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
           <div className="flex flex-col space-y-3">
             <MobileLink
@@ -55,6 +54,17 @@ export function MobileNav() {
             >
               <Trans>Type Calculator</Trans>
             </MobileLink>
+            <MobileLink
+              href="/pokedex"
+              className={cn(
+                "transition-colors hover:text-foreground/80",
+                pathname.startsWith("/pokedex")
+                  ? "text-foreground"
+                  : "text-foreground/60"
+              )}
+            >
+              <Trans>Pokédex</Trans>
+            </MobileLink>
             <MobileLink
               href="/whos-that-pokemon"
               className={cn(

src/components/ui/loading-spinner.tsx

@@ -0,0 +1,9 @@
+import { Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const LoadingSpinner = ({ className }: { className?: string }) => {
+  return <Loader2 className={cn("my-28 animate-spin", className)} />
+}
+
+export { LoadingSpinner }