Fix race condition loading breakdown modals (#4950)

Locally I ran into a FE race condition bug on loading breakdown modal data
due to how items and `response.meta` was handled. This fixes that by
handling meta not being loaded yet gracefully.

assets/js/dashboard/stats/modals/breakdown-modal.tsx

@@ -79,7 +79,7 @@ export default function BreakdownModal<TListItem extends { name: string }>({
 }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
-  const [meta, setMeta] = useState<BreakdownResultMeta | undefined>(undefined)
+  const [meta, setMeta] = useState<BreakdownResultMeta | null>(null)
 
   const [search, setSearch] = useState('')
   const defaultOrderBy = getStoredOrderBy({

assets/js/dashboard/stats/reports/list.js

@@ -148,7 +148,7 @@ export default function ListReport({
   fetchData
 }) {
   const { query } = useQueryContext()
-  const [state, setState] = useState({ loading: true, list: null })
+  const [state, setState] = useState({ loading: true, list: null, meta: null })
   const [visible, setVisible] = useState(false)
 
   const isRealtime = isRealTimeDashboard(query)
@@ -156,7 +156,7 @@ export default function ListReport({
 
   const getData = useCallback(() => {
     if (!isRealtime) {
-      setState({ loading: true, list: null })
+      setState({ loading: true, list: null, meta: null })
     }
     fetchData().then((response) => {
       if (afterFetchData) {
@@ -177,7 +177,7 @@ export default function ListReport({
       // When a goal filter is applied or removed, we always want the component to go into a
       // loading state, even in realtime mode, because the metrics list will change. We can
       // only read the new metrics once the new list is loaded.
-      setState({ loading: true, list: null })
+      setState({ loading: true, list: null, meta: null })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [goalFilterApplied])

assets/js/dashboard/stats/reports/metric-value.tsx

@@ -37,7 +37,7 @@ export default function MetricValue(props: {
   metric: Metric
   renderLabel: (query: DashboardQuery) => string
   formatter?: (value: ValueType) => string
-  meta: BreakdownResultMeta
+  meta: BreakdownResultMeta | null
 }) {
   const { query } = useQueryContext()
 
@@ -92,7 +92,7 @@ function ComparisonTooltipContent({
   metric: Metric
   metricLabel: string
   formatter?: (value: ValueType) => string
-  meta: BreakdownResultMeta
+  meta: BreakdownResultMeta | null
 }) {
   const longFormatter = formatter ?? MetricFormatterLong[metric]
 
@@ -104,7 +104,7 @@ function ComparisonTooltipContent({
     return ` ${metricLabel.toLowerCase()}`
   }, [metricLabel])
 
-  if (comparison) {
+  if (comparison && meta) {
     return (
       <div className="text-left whitespace-nowrap py-1 space-y-2">
         <div>