feat(dashboard-v3): updated ui components and hooks for new migrated apis and v3 apis

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -0,0 +1,46 @@
+// this will show a loading animation with text below
+// if you pass array it will say it one by one giving user clear instruction on what's happening
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+type Props = {
+  text?: string | string[];
+  frequency?: number;
+};
+
+export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
+  const [pos, setPos] = useState(0);
+  const isTextArray = Array.isArray(text);
+  useEffect(() => {
+    let interval: NodeJS.Timer;
+    if (isTextArray) {
+      interval = setInterval(() => {
+        setPos((state) => (state + 1) % text.length);
+      }, frequency);
+    }
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="container mx-auto flex relative flex-col h-1/2 w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
+      <div>
+        <img src="/images/loading/loading.gif" height={210} width={240} alt="loading animation" />
+      </div>
+      {text && isTextArray && (
+        <AnimatePresence>
+          <motion.div
+            className="text-primary text-sm absolute bottom-1/4"
+            key={`content-loader-${pos}`}
+            initial={{ opacity: 0, translateY: 20 }}
+            animate={{ opacity: 1, translateY: 0 }}
+            exit={{ opacity: 0, translateY: -20 }}
+          >
+            {text[pos]}
+          </motion.div>
+        </AnimatePresence>
+      )}
+      {text && !isTextArray && <div className="text-primary text-sm">{text}</div>}
+    </div>
+  );
+};