src/components/Documents/DocumentSkeleton.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+const SkeletonCell = ({
+  width = "100%",
+  height = 20,
+  className = "",
+  style = {},
+}) => (
+  <div
+    className={`skeleton ${className}`}
+    style={{
+      width,
+      height,
+      borderRadius: 4,
+      ...style,
+    }}
+  />
+);
+
+export const DocumentTableSkeleton = ({ rows = 5 }) => {
+  return (
+    <div className="card px-2">
+      <table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
+        <thead>
+          <tr>
+            <th className="text-start">Name</th>
+            <th className="text-start">Document Type</th>
+            <th className="text-start">Uploaded By</th>
+            <th className="text-center">Uploaded on</th>
+            <th className="text-center">Status</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {[...Array(rows)].map((_, idx) => (
+            <tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
+              {/* Name */}
+              <td className="text-start">
+                <SkeletonCell width="120px" height={16} />
+              </td>
+
+              {/* Document Type */}
+              <td className="text-start">
+                <SkeletonCell width="100px" height={16} />
+              </td>
+
+              {/* Uploaded By (Avatar + Name) */}
+              <td className="text-start">
+                <div className="d-flex align-items-center gap-2">
+                  <SkeletonCell width="30px" height={30} className="rounded-circle" />
+                  <SkeletonCell width="80px" height={16} />
+                </div>
+              </td>
+
+              {/* Uploaded on */}
+              <td className="text-center">
+                <SkeletonCell width="80px" height={16} />
+              </td>
+
+              {/* Status */}
+              <td className="text-center">
+                <SkeletonCell width="70px" height={20} className="rounded" />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

src/components/Documents/DocumentsList.jsx

@@ -5,6 +5,7 @@ import Avatar from "../common/Avatar";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Loader from "../common/Loader";
 import { useDebounce } from "../../utils/appUtils";
+import { DocumentTableSkeleton } from "./DocumentSkeleton";
 
 export const getDocuementsStatus = (status) => {
   switch (status) {
@@ -43,7 +44,7 @@ const DocumentsList = ({ Document_Entity, Entity,searchText ,setIsRefetching,
       setIsRefetching(isFetching);
     }, [isFetching, setIsRefetching]);
 
-  if (isLoading) return <Loader />;
+  if (isLoading) return <DocumentTableSkeleton/>;
   if (isError) return <p>Error: {error?.message || "Something went wrong"}</p>;
 
   const DocumentColumns = [

src/components/Documents/NewDocument.jsx

@@ -174,7 +174,7 @@ const NewDocument = ({closeModal,Document_Entity,Entity}) => {
           </div>
 
           {/* Type */}
-          <div className="mb-2">
+          {categoryId && (<div className="mb-2">
             <Label htmlFor="documentTypeId">Document Type</Label>
             <select
               {...register("documentTypeId")}
@@ -194,7 +194,8 @@ const NewDocument = ({closeModal,Document_Entity,Entity}) => {
             {errors.documentTypeId && (
               <div className="danger-text">{errors.documentTypeId.message}</div>
             )}
-          </div>
+          </div>)}
+          
 
           {/* Document ID */}
           <div className="mb-2">