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

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