feat: implement loading indicators in transactions page and loading component for improved user feedback during data fetching

app/transactions/page.tsx

@@ -2,7 +2,8 @@
 
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useSearchParams } from "next/navigation";
-import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
+import { PageLayout, PageHeader } from "@/components/layout";
+import { RefreshCw } from "lucide-react";
 import {
   TransactionFilters,
   TransactionBulkActions,
@@ -252,10 +253,6 @@ export default function TransactionsPage() {
     queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
   }, [invalidateTransactions, queryClient]);
 
-  if (isLoadingMetadata || !metadata) {
-    return <LoadingState />;
-  }
-
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat("fr-FR", {
       style: "currency",
@@ -530,6 +527,17 @@ export default function TransactionsPage() {
   const totalTransactions = transactionsData?.total || 0;
   const hasMore = transactionsData?.hasMore || false;
 
+  // Early return for loading state - prevents sidebar flash
+  if (isLoadingMetadata || !metadata) {
+    return (
+      <div className="flex h-screen bg-background">
+        <main className="flex-1 flex items-center justify-center">
+          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
+        </main>
+      </div>
+    );
+  }
+
   return (
     <PageLayout>
       <PageHeader
@@ -600,7 +608,9 @@ export default function TransactionsPage() {
       />
 
       {isLoadingTransactions ? (
-        <LoadingState />
+        <div className="flex items-center justify-center py-12">
+          <RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
+        </div>
       ) : (
         <>
           <TransactionTable