fix: add skeleton for better loading state (#2063)

Author: HarrisonRogers

apps/namadillo/src/App/Common/TableWithPaginator.tsx

@@ -68,6 +68,7 @@ export const TableWithPaginator = <T,>({
     );
   }, [page, itemList, onPageChange]);
 
+  // Show empty state only when no results
   if (rows.length === 0) {
     return (
       <div className="flex items-center justify-center text-sm py-4 text-neutral-200">

apps/namadillo/src/App/Governance/AllProposalsTable.tsx

@@ -1,4 +1,9 @@
-import { Stack, StyledSelectBox, TableRow } from "@namada/components";
+import {
+  SkeletonLoading,
+  Stack,
+  StyledSelectBox,
+  TableRow,
+} from "@namada/components";
 import { Pagination } from "@namada/indexer-client";
 import { Proposal, isProposalStatus, proposalStatuses } from "@namada/types";
 import { mapUndefined } from "@namada/utils";
@@ -25,9 +30,11 @@ const Table: React.FC<
     pagination: Pagination;
     page: number;
     onPageChange: (page: number) => void;
+    isLoading?: boolean;
   } & ExtensionConnectedProps
 > = (props) => {
   const navigate = useNavigate();
+  const proposals = props.proposals;
 
   const headers = [
     "ID",
@@ -89,11 +96,23 @@ const Table: React.FC<
     ],
   });
 
+  // Show loading skeleton when data is loading and if no rows are rendered
+  if (props.isLoading && proposals.length === 0) {
+    return (
+      <div className="flex flex-col gap-4">
+        <SkeletonLoading height="450px" width="100%" />
+        <div className="flex justify-center">
+          <SkeletonLoading height="40px" width="100px" />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <TableWithPaginator
       id="all-proposals-table"
       headers={headers}
-      itemList={props.proposals}
+      itemList={proposals}
       renderRow={renderRow}
       tableProps={{
         className: clsx(
@@ -252,6 +271,7 @@ export const AllProposalsTable: React.FC<ExtensionConnectedProps> = (props) => {
           page={page}
           onPageChange={setPage}
           pagination={proposals.data?.pagination || {}}
+          isLoading={proposals.isLoading}
         />
       </div>
     </Stack>

apps/namadillo/src/App/Governance/GovernanceOverview.tsx

@@ -70,7 +70,7 @@ export const GovernanceOverview: React.FC = () => {
           className="flex-1"
           title="All Proposals"
           errorText="Unable to load the list of proposals"
-          atoms={activeAtoms}
+          atoms={[]}
         >
           <AllProposalsTable
             votedProposalIds={(votedProposals.data || []).map(