add loading animation to the player and server page when clicking search

src/app/(pages)/player/[[...id]]/page.tsx

@@ -69,7 +69,7 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
         <h1 className="text-xl">Lookup a Player</h1>
         <p>You can enter a players uuid or username to get information about the player.</p>
 
-        <LookupPlayer />
+        <LookupPlayer currentPlayer={id[0]} />
       </div>
 
       {error && <ErrorCard message={error} />}

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -124,7 +124,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
         <h1 className="text-xl">Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server</h1>
         <p>You can enter a server hostname to get information about the server.</p>
 
-        <LookupServer currentPlatform={platform.toLocaleLowerCase()} />
+        <LookupServer currentPlatform={platform.toLowerCase()} currentServer={hostname[0]} />
       </div>
 
       {error && <ErrorCard message={error} />}

src/app/components/player/lookup-player.tsx

@@ -3,14 +3,24 @@
 import { useToast } from "@/common/use-toast";
 import { getPlayer } from "mcutils-library";
 import { useRouter } from "next/navigation";
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
+import ScaleLoader from "react-spinners/ScaleLoader";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 
-export function LookupPlayer(): ReactElement {
+type PlayerLookupProps = {
+  /**
+   * The last displayed player.
+   */
+  currentPlayer: string;
+};
+
+export function LookupPlayer({ currentPlayer }: PlayerLookupProps): ReactElement {
+  console.log(currentPlayer);
   const router = useRouter();
   const { toast } = useToast();
+  const [loading, setLoading] = useState<boolean>(false);
 
   /**
    * Lookup a server based on the platform
@@ -23,8 +33,15 @@ export function LookupPlayer(): ReactElement {
       return;
     }
 
+    // Ignore the same player
+    if (query.toLowerCase() == currentPlayer.toLowerCase()) {
+      return;
+    }
+
     try {
+      setLoading(true);
       const player = await getPlayer(query);
+
       router.push(`/player/${player.username}`);
     } catch (err) {
       toast({
@@ -51,7 +68,10 @@ export function LookupPlayer(): ReactElement {
         </div>
       </div>
 
-      <Button type="submit">Search</Button>
+      <Button type="submit" className="flex gap-2">
+        {loading && <ScaleLoader width={1} height={20} radius={2} />}
+        Search
+      </Button>
     </form>
   );
 }

src/app/components/server/lookup-server.tsx

@@ -4,7 +4,8 @@ import { capitalizeFirstLetter } from "@/common/string-utils";
 import { useToast } from "@/common/use-toast";
 import { ServerPlatform, getServer } from "mcutils-library";
 import { useRouter } from "next/navigation";
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
+import ScaleLoader from "react-spinners/ScaleLoader";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
@@ -12,14 +13,21 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 
 type LookupServerProps = {
   /**
-   * The current platform.
+   * The last displayed platform.
    */
-  currentPlatform: string;
+  currentPlatform: string | undefined;
+
+  /**
+   * The last displayed server.
+   */
+  currentServer: string | undefined;
 };
 
-export function LookupServer({ currentPlatform }: LookupServerProps): ReactElement {
+export function LookupServer({ currentPlatform, currentServer }: LookupServerProps): ReactElement {
+  console.log(currentPlatform, currentServer);
   const router = useRouter();
   const { toast } = useToast();
+  const [loading, setLoading] = useState<boolean>(false);
 
   /**
    * Lookup a server based on the platform
@@ -33,7 +41,15 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme
     }
 
     try {
+      setLoading(true);
       const server = await getServer(platform, query);
+
+      // Ignore the same server
+      if (currentServer !== undefined && server.hostname == currentServer.toLowerCase()) {
+        setLoading(false);
+        return;
+      }
+
       router.push(`/server/${platform}/${server.hostname}`);
     } catch (err) {
       toast({
@@ -78,7 +94,10 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme
         </div>
       </div>
 
-      <Button type="submit">Search</Button>
+      <Button type="submit" className="flex gap-2">
+        {loading && <ScaleLoader width={1} height={20} radius={2} />}
+        Search
+      </Button>
     </form>
   );
 }