Standardise loading state naming across dashboard hooks

Docs/Tasks.md

@@ -399,7 +399,7 @@ const source = timeRange === "24h" ? "fail2ban" : "archive";
 
 ---
 
-### TASK-020 — Standardise `loading` vs `isLoading` naming across hooks
+### TASK-020 — Standardise `loading` vs `isLoading` naming across hooks (done)
 
 **Where found:** Dashboard and country-data hooks (`useBans`, `useBanTrend`, `useDashboardCountryData`) return `isLoading`. All other hooks (`useActiveBans`, `useJails`, `useBlocklists`, `useFilterList`, `useActionList`, etc.) return `loading`.
 

frontend/src/components/BanTrendChart.tsx

@@ -200,7 +200,7 @@ export const BanTrendChart = memo(function BanTrendChart({
   source = "fail2ban",
 }: BanTrendChartProps): React.JSX.Element {
   const styles = useStyles();
-  const { buckets, isLoading, error, reload } = useBanTrend(timeRange, origin, source);
+  const { buckets, loading, error, reload } = useBanTrend(timeRange, origin, source);
 
   const isEmpty = buckets.every((b) => b.count === 0);
   const entries = buildEntries(buckets, timeRange);
@@ -227,7 +227,7 @@ export const BanTrendChart = memo(function BanTrendChart({
 
   return (
     <ChartStateWrapper
-      isLoading={isLoading}
+      isLoading={loading}
       error={error}
       onRetry={reload}
       isEmpty={isEmpty}

frontend/src/components/JailDistributionChart.tsx

@@ -134,7 +134,7 @@ export const JailDistributionChart = memo(function JailDistributionChart({
   origin,
 }: JailDistributionChartProps): React.JSX.Element {
   const styles = useStyles();
-  const { jails, isLoading, error, reload } = useJailDistribution(timeRange, origin);
+  const { jails, loading, error, reload } = useJailDistribution(timeRange, origin);
 
   const entries = buildEntries(jails);
   const chartHeight = Math.max(entries.length * BAR_HEIGHT_PX, MIN_CHART_HEIGHT);
@@ -149,7 +149,7 @@ export const JailDistributionChart = memo(function JailDistributionChart({
 
   return (
     <ChartStateWrapper
-      isLoading={isLoading}
+      isLoading={loading}
       error={error}
       onRetry={reload}
       isEmpty={jails.length === 0}

frontend/src/components/__tests__/BanTrendChart.test.tsx

@@ -36,7 +36,7 @@ function wrap(ui: React.ReactElement) {
 const defaultResult: UseBanTrendResult = {
   buckets: [],
   bucketSize: "1h",
-  isLoading: false,
+  loading: false,
   error: null,
   reload: vi.fn(),
 };
@@ -54,7 +54,7 @@ beforeEach(() => {
 
 describe("BanTrendChart", () => {
   it("shows a spinner while loading", () => {
-    mockHook({ isLoading: true });
+    mockHook({ loading: true });
     wrap(<BanTrendChart timeRange="24h" origin="all" />);
     expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });

frontend/src/components/__tests__/JailDistributionChart.test.tsx

@@ -33,7 +33,7 @@ function wrap(ui: React.ReactElement) {
 const defaultResult: UseJailDistributionResult = {
   jails: [],
   total: 0,
-  isLoading: false,
+  loading: false,
   error: null,
   reload: vi.fn(),
 };
@@ -53,7 +53,7 @@ beforeEach(() => {
 
 describe("JailDistributionChart", () => {
   it("shows a spinner while loading", () => {
-    mockHook({ isLoading: true });
+    mockHook({ loading: true });
     wrap(<JailDistributionChart timeRange="24h" origin="all" />);
     expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });

frontend/src/hooks/useBanTrend.ts

@@ -21,7 +21,7 @@ export interface UseBanTrendResult {
   /** Human-readable bucket size label, e.g. `"1h"`. */
   bucketSize: string;
   /** True while a fetch is in flight. */
-  isLoading: boolean;
+  loading: boolean;
   /** Error message or `null`. */
   error: string | null;
   /** Re-fetch the data immediately. */
@@ -46,7 +46,7 @@ export function useBanTrend(
 ): UseBanTrendResult {
   const [buckets, setBuckets] = useState<BanTrendBucket[]>([]);
   const [bucketSize, setBucketSize] = useState<string>("1h");
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
   const abortRef = useRef<AbortController | null>(null);
@@ -56,7 +56,7 @@ export function useBanTrend(
     const controller = new AbortController();
     abortRef.current = controller;
 
-    setIsLoading(true);
+    setLoading(true);
     setError(null);
 
     fetchBanTrend(timeRange, origin, source, controller.signal)
@@ -71,7 +71,7 @@ export function useBanTrend(
       })
       .finally(() => {
         if (!controller.signal.aborted) {
-          setIsLoading(false);
+          setLoading(false);
         }
       });
   }, [timeRange, origin, source]);
@@ -83,5 +83,5 @@ export function useBanTrend(
     };
   }, [load]);
 
-  return { buckets, bucketSize, isLoading, error, reload: load };
+  return { buckets, bucketSize, loading, error, reload: load };
 }

frontend/src/hooks/useDashboardCountryData.ts

@@ -27,7 +27,7 @@ export interface UseDashboardCountryDataResult {
   /** Total ban count in the window. */
   total: number;
   /** True while a fetch is in flight. */
-  isLoading: boolean;
+  loading: boolean;
   /** Error message or `null`. */
   error: string | null;
   /** Re-fetch the data immediately. */
@@ -54,7 +54,7 @@ export function useDashboardCountryData(
   const [countryNames, setCountryNames] = useState<Record<string, string>>({});
   const [bans, setBans] = useState<DashboardBanItem[]>([]);
   const [total, setTotal] = useState<number>(0);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
   const abortRef = useRef<AbortController | null>(null);
@@ -65,7 +65,7 @@ export function useDashboardCountryData(
     const controller = new AbortController();
     abortRef.current = controller;
 
-    setIsLoading(true);
+    setLoading(true);
     setError(null);
 
     fetchBansByCountry(timeRange, origin, source)
@@ -82,7 +82,7 @@ export function useDashboardCountryData(
       })
       .finally(() => {
         if (!controller.signal.aborted) {
-          setIsLoading(false);
+          setLoading(false);
         }
       });
   }, [timeRange, origin, source]);
@@ -94,5 +94,5 @@ export function useDashboardCountryData(
     };
   }, [load]);
 
-  return { countries, countryNames, bans, total, isLoading, error, reload: load };
+  return { countries, countryNames, bans, total, loading, error, reload: load };
 }

frontend/src/hooks/useJailDistribution.ts

@@ -21,7 +21,7 @@ export interface UseJailDistributionResult {
   /** Total ban count for the selected window. */
   total: number;
   /** True while a fetch is in flight. */
-  isLoading: boolean;
+  loading: boolean;
   /** Error message or `null`. */
   error: string | null;
   /** Re-fetch the data immediately. */
@@ -45,7 +45,7 @@ export function useJailDistribution(
 ): UseJailDistributionResult {
   const [jails, setJails] = useState<JailBanCount[]>([]);
   const [total, setTotal] = useState<number>(0);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
   const abortRef = useRef<AbortController | null>(null);
@@ -55,7 +55,7 @@ export function useJailDistribution(
     const controller = new AbortController();
     abortRef.current = controller;
 
-    setIsLoading(true);
+    setLoading(true);
     setError(null);
 
     fetchBansByJail(timeRange, origin, "fail2ban", controller.signal)
@@ -70,7 +70,7 @@ export function useJailDistribution(
       })
       .finally(() => {
         if (!controller.signal.aborted) {
-          setIsLoading(false);
+          setLoading(false);
         }
       });
   }, [timeRange, origin]);
@@ -82,5 +82,5 @@ export function useJailDistribution(
     };
   }, [load]);
 
-  return { jails, total, isLoading, error, reload: load };
+  return { jails, total, loading, error, reload: load };
 }

frontend/src/pages/DashboardPage.tsx

@@ -80,7 +80,7 @@ export function DashboardPage(): React.JSX.Element {
 
   const source = getDataSource(timeRange);
 
-  const { countries, countryNames, isLoading: countryLoading, error: countryError, reload: reloadCountry } =
+  const { countries, countryNames, loading: countryLoading, error: countryError, reload: reloadCountry } =
     useDashboardCountryData(timeRange, originFilter, source);
 
   const sectionStyles = useCommonSectionStyles();