Added loader component (#30)

Author: je-zhou

frontend/src/app/jobs/loading.tsx

@@ -1,4 +1,10 @@
+import ThreeDotLoader from "@/components/ui/loading_dots";
+
 // frontend/src/app/jobs/loading.tsx
 export default function JobLoading() {
-  return <div>Loading Job...</div>;
+  return (
+    <div className="flex min-h-[70vh] justify-center items-center ">
+      <ThreeDotLoader />
+    </div>
+  );
 }

frontend/src/app/loading.tsx

@@ -1,3 +1,9 @@
+import ThreeDotLoader from "@/components/ui/loading_dots";
+
 export default function Loading() {
-  return <div>Loading...</div>;
+  return (
+    <div className="py-8">
+      <ThreeDotLoader />
+    </div>
+  );
 }

frontend/src/components/ui/loading_dots.tsx

@@ -0,0 +1,41 @@
+export default function ThreeDotLoader({
+  className,
+  mode = "dark",
+}: {
+  className?: string;
+  mode?: "light" | "dark";
+}) {
+  return (
+    <div
+      className={
+        "flex items-center justify-center space-x-2 " +
+        (className ? ` ${className}` : "")
+      }
+    >
+      <style>{`
+        @keyframes flow {
+          0%, 80%, 100% { opacity: 0.2; }
+          40% { opacity: 1; }
+        }
+        .dot {
+          animation: flow 1.4s infinite ease-in-out;
+        }
+        .dot:nth-child(1) {
+          animation-delay: -0.32s;
+        }
+        .dot:nth-child(2) {
+          animation-delay: -0.16s;
+        }
+      `}</style>
+      <div
+        className={`w-3 h-3 rounded-full dot ${mode == "dark" ? "bg-white" : "bg-black/70"}`}
+      />
+      <div
+        className={`w-3 h-3 rounded-full dot ${mode == "dark" ? "bg-white" : "bg-black/70"}`}
+      />
+      <div
+        className={`w-3 h-3 rounded-full dot ${mode == "dark" ? "bg-white" : "bg-black/70"}`}
+      />
+    </div>
+  );
+}