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

package.json

@@ -32,6 +32,7 @@
     "react-countup": "^6.5.3",
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
+    "react-spinners": "^0.13.8",
     "react-syntax-highlighter": "^15.5.0",
     "react-use-websocket": "3.0.0",
     "tailwind-merge": "^2.2.2",

pnpm-lock.yaml

@@ -74,6 +74,9 @@ dependencies:
   react-hook-form:
     specifier: ^7.51.3
     version: 7.51.3(react@18.2.0)
+  react-spinners:
+    specifier: ^0.13.8
+    version: 0.13.8(react-dom@18.2.0)(react@18.2.0)
   react-syntax-highlighter:
     specifier: ^15.5.0
     version: 15.5.0(react@18.2.0)
@@ -4976,6 +4979,16 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.2.78)(react@18.2.0)
     dev: false
 
+  /react-spinners@0.13.8(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-style-singleton@2.2.1(@types/react@18.2.78)(react@18.2.0):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}

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

src/common/colors.ts

@@ -1,3 +1,6 @@
+/**
+ * Re-useable colors.
+ */
 export const Colors = {
   green: "#0FFF50",
   red: "#8B0000",

src/common/embed.ts

@@ -1,9 +1,20 @@
 import { Metadata } from "next";
 
 type Embed = {
+  /**
+   * The title of the embed.
+   */
   title: string;
+
+  /**
+   * The description of the embed.
+   */
   description: string;
-  image?: string | null;
+
+  /**
+   * The image to show as the thumbmail.
+   */
+  image?: string;
 };
 
 /**