feat: revamp loading spinner

src/components/ui/loading-spinner.tsx

@@ -0,0 +1,64 @@
+/*
+ * MHSF, Minehut Server List
+ * All external content is rather licensed under the ECA Agreement
+ * located here: https://mhsf.app/docs/legal/external-content-agreement
+ *
+ * All code under MHSF is licensed under the MIT License
+ * by open source contributors
+ *
+ * Copyright (c) 2024 dvelo
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ * OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { cn } from "@/lib/utils";
+
+export function LoadingSpinner({ className }: { className?: string }) {
+  return (
+    <div className={cn("h-5 w-5", className)}>
+      <div
+        style={{
+          position: "relative",
+          top: "50%",
+          left: "50%",
+        }}
+        className={cn("loading-spinner", "h-5 w-5", className)}
+      >
+        {[...Array(12)].map((_, i) => (
+          <div
+            key={i}
+            style={{
+              animationDelay: `${-1.2 + 0.1 * i}s`,
+              background: "gray",
+              position: "absolute",
+              borderRadius: "1rem",
+              width: "30%",
+              height: "8%",
+              left: "-10%",
+              top: "-4%",
+              transform: `rotate(${30 * i}deg) translate(120%)`,
+            }}
+            className="animate-spinner"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}