diff --git a/ui/src/components/loaders/CardLoader.tsx b/ui/src/components/loaders/CardLoader.tsx
new file mode 100644
index 00000000..bd95e198
--- /dev/null
+++ b/ui/src/components/loaders/CardLoader.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface CardLoaderProps {
+  className?: string;
+  variant: "light" | "dark";
+}
+
+const CardLoader: React.FC<CardLoaderProps> = ({ className, variant }) => {
+  const style = {
+    light: `bg-[linear-gradient(270deg,_#D8EBFF_0%,_#ECF5FF_100%)]
+      shadow-light`,
+    dark: `bg-[linear-gradient(270deg,_#252525_0%,_rgba(68,_67,_67,_0.24)_100%)]
+      shadow-dark`,
+  };
+
+  return (
+    <div
+      className={twMerge(
+        `h-[275px]
+        rounded-2xl
+        animate-pulse
+        ${style[variant]}`,
+        className
+      )}
+    ></div>
+  );
+};
+
+export default CardLoader;
diff --git a/ui/src/components/loaders/TableLoader.tsx b/ui/src/components/loaders/TableLoader.tsx
new file mode 100644
index 00000000..bca82cd7
--- /dev/null
+++ b/ui/src/components/loaders/TableLoader.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface TableLoaderProps {
+  className?: string;
+  variant: "light" | "dark";
+}
+
+const TableLoader: React.FC<TableLoaderProps> = ({ className, variant }) => {
+  const style = {
+    light: `bg-[linear-gradient(270deg,_#D8EBFF_0%,_#ECF5FF_100%)]`,
+    dark: `bg-[linear-gradient(270deg,_#252525_0%,_rgba(68,_67,_67,_0.24)_100%)]`,
+  };
+
+  return (
+    <div
+      className={twMerge(
+        `h-4
+        rounded-full
+        animate-pulse
+        ${style[variant]}`,
+        className
+      )}
+    ></div>
+  );
+};
+
+export default TableLoader;
diff --git a/ui/src/components/tables/Table.tsx b/ui/src/components/tables/Table.tsx
index 956ac9b9..56ed9424 100644
--- a/ui/src/components/tables/Table.tsx
+++ b/ui/src/components/tables/Table.tsx
@@ -9,6 +9,7 @@ import {
 import { Tooltip } from "react-tooltip";
 
 import Tag from "@/components/tags/Tag";
+import TableLoader from "@/components/loaders/TableLoader";
 import ChiliLight from "@/assets/illustrations/ChiliLight";
 import ChiliDark from "@/assets/illustrations/ChiliDark";
 import CodeBranchIcon from "@/assets/icons/CodeBranchIcon";
@@ -19,12 +20,14 @@ import { Layer, LayerState } from "@/clients/layers/types";
 export interface TableProps {
   className?: string;
   variant?: "light" | "dark";
+  isLoading?: boolean;
   data: Layer[];
 }
 
 const Table: React.FC<TableProps> = ({
   className,
   variant = "light",
+  isLoading,
   data,
 }) => {
   const columnHelper = createColumnHelper<Layer>();
@@ -211,78 +214,137 @@ const Table: React.FC<TableProps> = ({
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map((row) => (
-            <tr
-              key={row.id}
-              className={twMerge(
-                `h-full
-                ${styles.row.base[variant]}`,
-                row.original.isRunning &&
-                  `rounded-2xl
-                  outline
-                  outline-4
-                  -outline-offset-4
-                  ${styles.row.running[variant]}`
-              )}
-            >
-              {row.getVisibleCells().map((cell, index) => (
-                <td
-                  key={cell.id}
+          {isLoading
+            ? Array.from({ length: 100 }).map((_, index) => (
+                <tr
+                  key={index}
                   className={twMerge(
-                    `relative
-                    text-left
-                    h-full
-                    text-base
-                    font-semibold
-                    px-6
-                    py-4`,
-                    cell.row.original.isRunning &&
-                      "first:rounded-l-2xl last:rounded-r-2xl"
+                    `h-full
+                    ${styles.row.base[variant]}`
                   )}
-                  data-tooltip-id="table-tooltip"
-                  data-tooltip-content={
-                    cell.column.id === "lastResult" &&
-                    cell.row.original.isRunning
-                      ? (cell.getValue() as string)
-                      : null
-                  }
                 >
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  {index === 0 ? (
-                    <hr
-                      className={`
-                        absolute
-                        right-0
-                        bottom-0
-                        w-[calc(100%_-_25px)]
-                        ${styles.separator[variant]}
-                      `}
-                    />
-                  ) : index === row.getVisibleCells().length - 1 ? (
-                    <hr
-                      className={`
-                        absolute
-                        left-0
-                        bottom-0
-                        w-[calc(100%_-_25px)]
-                        ${styles.separator[variant]}
-                      `}
-                    />
-                  ) : (
-                    <hr
-                      className={`
-                        absolute
-                        bottom-0
-                        left-0
-                        w-full
-                        ${styles.separator[variant]}
-                      `}
-                    />
+                  {table.getAllColumns().map((_, index) => (
+                    <td
+                      key={index}
+                      className={`relative
+                        text-left
+                        h-full
+                        text-base
+                        font-semibold
+                        px-6
+                        py-4`}
+                    >
+                      <TableLoader variant={variant} />
+                      {index === 0 ? (
+                        <hr
+                          className={`
+                            absolute
+                            right-0
+                            bottom-0
+                            w-[calc(100%_-_25px)]
+                            ${styles.separator[variant]}
+                          `}
+                        />
+                      ) : index === table.getAllColumns().length - 1 ? (
+                        <hr
+                          className={`
+                            absolute
+                            left-0
+                            bottom-0
+                            w-[calc(100%_-_25px)]
+                            ${styles.separator[variant]}
+                          `}
+                        />
+                      ) : (
+                        <hr
+                          className={`
+                            absolute
+                            bottom-0
+                            left-0
+                            w-full
+                            ${styles.separator[variant]}
+                          `}
+                        />
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : table.getRowModel().rows.map((row) => (
+                <tr
+                  key={row.id}
+                  className={twMerge(
+                    `h-full
+                  ${styles.row.base[variant]}`,
+                    row.original.isRunning &&
+                      `rounded-2xl
+                      outline
+                      outline-4
+                      -outline-offset-4
+                      ${styles.row.running[variant]}`
                   )}
-                </td>
+                >
+                  {row.getVisibleCells().map((cell, index) => (
+                    <td
+                      key={cell.id}
+                      className={twMerge(
+                        `relative
+                        text-left
+                        h-full
+                        text-base
+                        font-semibold
+                        px-6
+                        py-4`,
+                        cell.row.original.isRunning &&
+                          "first:rounded-l-2xl last:rounded-r-2xl"
+                      )}
+                      data-tooltip-id="table-tooltip"
+                      data-tooltip-content={
+                        cell.column.id === "lastResult" &&
+                        cell.row.original.isRunning
+                          ? (cell.getValue() as string)
+                          : null
+                      }
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                      {index === 0 ? (
+                        <hr
+                          className={`
+                            absolute
+                            right-0
+                            bottom-0
+                            w-[calc(100%_-_25px)]
+                            ${styles.separator[variant]}
+                          `}
+                        />
+                      ) : index === row.getVisibleCells().length - 1 ? (
+                        <hr
+                          className={`
+                            absolute
+                            left-0
+                            bottom-0
+                            w-[calc(100%_-_25px)]
+                            ${styles.separator[variant]}
+                          `}
+                        />
+                      ) : (
+                        <hr
+                          className={`
+                            absolute
+                            bottom-0
+                            left-0
+                            w-full
+                            ${styles.separator[variant]}
+                          `}
+                        />
+                      )}
+                    </td>
+                  ))}
+                </tr>
               ))}
-            </tr>
-          ))}
         </tbody>
       </table>
       <Tooltip
diff --git a/ui/src/pages/layers/Layers.tsx b/ui/src/pages/layers/Layers.tsx
index d200eb3e..1235890f 100644
--- a/ui/src/pages/layers/Layers.tsx
+++ b/ui/src/pages/layers/Layers.tsx
@@ -23,6 +23,7 @@ import { LayerState } from "@/clients/layers/types";
 import SearchIcon from "@/assets/icons/SearchIcon";
 import AppsIcon from "@/assets/icons/AppsIcon";
 import BarsIcon from "@/assets/icons/BarsIcon";
+import CardLoader from "@/components/loaders/CardLoader";
 
 const Layers: React.FC = () => {
   const { theme } = useContext(ThemeContext);
@@ -230,21 +231,43 @@ const Layers: React.FC = () => {
           </div>
         </div>
       </div>
-      <div className="relative overflow-auto">
-        {layersQuery.isLoading && <></>}
-        {layersQuery.isError && <></>}
-        {layersQuery.isSuccess &&
-          (view === "grid" ? (
-            <div className="grid grid-cols-[repeat(auto-fit,_minmax(400px,_1fr))] p-6 pt-3 gap-6">
-              {layersQuery.data.results.map((layer, index) => (
+      <div
+        className={`
+          relative
+          ${layersQuery.isSuccess ? "overflow-auto" : "overflow-hidden"}
+        `}
+      >
+        {view === "grid" ? (
+          <div className="grid grid-cols-[repeat(auto-fit,_minmax(400px,_1fr))] p-6 pt-3 gap-6">
+            {layersQuery.isLoading ? (
+              Array.from({ length: 100 }).map((_, index) => (
+                <CardLoader key={index} variant={theme} />
+              ))
+            ) : layersQuery.isError ? (
+              <span>An error has occurred</span>
+            ) : layersQuery.isSuccess ? (
+              layersQuery.data.results.map((layer, index) => (
                 <Card key={index} variant={theme} layer={layer} />
-              ))}
-            </div>
-          ) : view === "table" ? (
-            <Table variant={theme} data={layersQuery.data.results} />
-          ) : (
-            <></>
-          ))}
+              ))
+            ) : (
+              <></>
+            )}
+          </div>
+        ) : view === "table" ? (
+          <div>
+            {layersQuery.isLoading ? (
+              <Table variant={theme} isLoading data={[]} />
+            ) : layersQuery.isError ? (
+              <span>An error has occurred</span>
+            ) : layersQuery.isSuccess ? (
+              <Table variant={theme} data={layersQuery.data.results} />
+            ) : (
+              <></>
+            )}
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );