Implemented Loading State for jobs page

Author: ladunjexa

app/(root)/jobs/loading.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const Loading = () => {
+  return (
+    <section>
+      <h1 className="h1-bold text-dark100_light900">Jobs</h1>
+
+      <div className="mb-12 mt-11 flex flex-wrap gap-5">
+        <Skeleton className="h-14 flex-1" />
+        <Skeleton className="h-14 w-28" />
+      </div>
+
+      <div className="my-10">
+        <div className="hidden flex-wrap gap-3 md:flex">
+          <Skeleton className="h-9 w-28" />
+          <Skeleton className="h-9 w-28" />
+          <Skeleton className="h-9 w-28" />
+          <Skeleton className="h-9 w-28" />
+        </div>
+        <div className="mt-2">
+          <Skeleton className="h-9 w-72" />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-6">
+        {[...Array(10)].map((_, i) => (
+          <Skeleton key={i} className="h-52 w-full rounded-xl" />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Loading;