chore(pages:problems): display a loading component for /problems page

  ## what
  - display a loading component for `/problems` page

  ## how

  ## why

  ## where
  - ./src/app/problems/page.tsx

  ## usage

src/app/problems/page.tsx

@@ -1,26 +1,32 @@
 "use client";
 
 import { DataTable } from "@/components/ui/data-table";
+import DataTableLoading from "@/components/ui/data-table/loading";
 import { columns } from "@/app/problems/components/data-table/columns";
 import { useFetchProblems } from "@/hooks";
 
 const ProblemsPage = () => {
   const { data, isLoading, isError } = useFetchProblems();
 
   if (isLoading) {
-    return <div>Fetching data </div>;
+    return (
+      <section>
+        <h1 className="text-3xl">All Problems</h1>
+        <DataTableLoading numColumns={2} numRows={8} />
+      </section>
+    );
   }
 
   if (isError) {
     return <div>Error fetching data</div>;
   }
 
   return (
-  <section>
-    <h1 className="text-3xl">All Problems</h1>
-    <DataTable columns={columns} data={data} />
-  </section>
-  )
+    <section>
+      <h1 className="text-3xl">All Problems</h1>
+      <DataTable columns={columns} data={data} />
+    </section>
+  );
 };
 
 export default ProblemsPage;