diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 0453aea289..e98e719aab 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2021 The Jaeger Authors.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from 'react';
 import { Row, Col, Input, Alert, Select } from 'antd';
 import { ActionFunctionAny, Action } from 'redux-actions';
 import _debounce from 'lodash/debounce';
@@ -224,6 +224,14 @@ export function MonitorATMServicesViewImpl(props: TProps) {
     };
   }, [updateDimensions, calcGraphXDomain]);
 
+  // Recalculate graph width once services finish loading, since the graph
+  // container ref is not mounted while the loading spinner is shown (#3539).
+  useLayoutEffect(() => {
+    if (!servicesLoading) {
+      updateDimensions();
+    }
+  }, [servicesLoading, updateDimensions]);
+
   // componentDidUpdate equivalent
   useEffect(() => {
     if (services.length !== 0) {