refactor: tweaks styles for providers table

components/ui/custom/CustomLoader.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export const CustomLoader = (props: { size?: "small" }) => {
+  const [loadingSpinner, setloadingSpinner] = useState(0);
+  const loadingChars = "|/-\\";
+
+  const textClasses = `w-xs px-xs ${props.size === "small" ? "!text-s" : ""}`;
+
+  useEffect(() => {
+    setTimeout(() => setloadingSpinner(loadingSpinner + 1), 150);
+  }, [loadingSpinner]);
+
+  return <p className={textClasses}>{loadingChars[loadingSpinner % 4]}</p>;
+};

components/ui/custom/index.ts

@@ -1,3 +1,4 @@
 export * from "./CustomBox";
 export * from "./CustomButtonClientAction";
 export * from "./CustomInput";
+export * from "./CustomLoader";