Update breadcrumbs in Quotas after mobx migration

Author: jvorcak

frontend/src/components/pages/quotas/quotas-list.tsx

@@ -14,7 +14,7 @@ import { Alert, AlertIcon, Button, DataTable, Result, Skeleton } from '@redpanda
 import { useQuery } from '@tanstack/react-query';
 import { SkipIcon } from 'components/icons';
 import { config } from 'config';
-import { useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import {
   Quota_EntityType,
@@ -23,7 +23,6 @@ import {
 } from '../../../protogen/redpanda/api/dataplane/v1/quota_pb';
 import { listQuotas } from '../../../protogen/redpanda/api/dataplane/v1/quota-QuotaService_connectquery';
 import type { QuotaResponse, QuotaResponseSetting } from '../../../state/rest-interfaces';
-import { uiState } from '../../../state/ui-state';
 import { InfoText } from '../../../utils/tsx-utils';
 import { prettyBytes, prettyNumber } from '../../../utils/utils';
 import PageContent from '../../misc/page-content';
@@ -97,13 +96,6 @@ const useQuotasQuery = () => {
 };
 
 const QuotasList = () => {
-  // Set page title and breadcrumbs using useLayoutEffect for synchronous execution
-  // This runs before browser paint, ensuring header renders immediately (fixes CI E2E tests)
-  useLayoutEffect(() => {
-    uiState.pageBreadcrumbs = [{ title: 'Quotas', linkTo: '/quotas' }];
-    uiState.pageTitle = 'Quotas';
-  }, []);
-
   const { data, error, isLoading } = useQuotasQuery();
 
   const quotasData = useMemo(() => {

frontend/src/routes/quotas.tsx

@@ -11,8 +11,10 @@
 
 import { createFileRoute } from '@tanstack/react-router';
 import { ScaleIcon } from 'components/icons';
+import { useLayoutEffect } from 'react';
 
 import QuotasList from '../components/pages/quotas/quotas-list';
+import { uiState } from '../state/ui-state';
 
 export const Route = createFileRoute('/quotas')({
   staticData: {
@@ -23,5 +25,11 @@ export const Route = createFileRoute('/quotas')({
 });
 
 function QuotasWrapper() {
+  // Set page title and breadcrumbs in route wrapper for early execution
+  useLayoutEffect(() => {
+    uiState.pageBreadcrumbs = [{ title: 'Quotas', linkTo: '' }];
+    uiState.pageTitle = 'Quotas';
+  }, []);
+
   return <QuotasList />;
 }