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

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>
   );
 }