Add Skeleton primitive and budget detail loading state

Replaces the blank flash on the budget detail tab with skeleton
placeholders that mirror the final card layout, so the page no
longer shifts when the API returns.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/pages/Budget.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { ChevronLeft, ChevronRight, Calculator } from 'lucide-react';
 
-import api, { type Transaction } from '@/api';
+import api, { type Transaction } from '@/lib/api';
 import { useBudget } from '@/hooks/useBudget';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -154,13 +154,11 @@ export default function Budget() {
             </div>
 
             <TabsContent value="detail" className="space-y-6 mt-4">
-              {monthDetail && (
-                <MonthlyDetail
-                  detail={monthDetail}
-                  loading={monthLoading}
-                  onNavigateToTransactions={handleNavigateToTransactions}
-                />
-              )}
+              <MonthlyDetail
+                detail={monthDetail}
+                loading={monthLoading || !monthDetail}
+                onNavigateToTransactions={handleNavigateToTransactions}
+              />
             </TabsContent>
 
             <TabsContent value="transactions" className="space-y-3 mt-4">