diff --git a/packages/react-components/src/components/data-providers/style-provider.ts b/packages/react-components/src/components/data-providers/style-provider.ts
index 662c0cfce..089f64c80 100644
--- a/packages/react-components/src/components/data-providers/style-provider.ts
+++ b/packages/react-components/src/components/data-providers/style-provider.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
 import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
-import { OutputElementStyle } from 'tsp-typescript-client/lib/models/styles';
+import { OutputStyleModel } from 'tsp-typescript-client/lib/models/styles';
 
 export class StyleProvider {
     private tspClient: TspClient;
@@ -10,7 +10,7 @@ export class StyleProvider {
 
     private tmpStyleObject: { [key: string]: { [key: string]: { [key: string]: any } } };
 
-    private styles: { [key: string]: OutputElementStyle } | undefined;
+    private styleModel: OutputStyleModel | undefined;
 
     constructor(outputId: string, traceId: string, tspClient: TspClient) {
         this.outputId = outputId;
@@ -80,22 +80,18 @@ export class StyleProvider {
     }
 
     /**
-     * Get the style for a specific output
-     * @param forceUpdate Force the update of the current cached styles from the server
+     * Get the style model for a specific output
+     * @param forceUpdate Force the update of the current cached style model from the server
      */
-    public async getStyles(forceUpdate?: boolean): Promise<{ [key: string]: OutputElementStyle }> {
-        if (!this.styles || forceUpdate) {
+    public async getStyleModel(forceUpdate?: boolean): Promise<OutputStyleModel | undefined> {
+        if (!this.styleModel || forceUpdate) {
             const tspClientResponse = await this.tspClient.fetchStyles(this.traceId, this.outputId, QueryHelper.query());
             const styleResponse = tspClientResponse.getModel();
             if (tspClientResponse.isOk() && styleResponse) {
-                const styleModel = styleResponse.model;
-                const styles = styleModel.styles;
-                this.styles = styles;
-                return styles;
+                this.styleModel = styleResponse.model;
             }
-            this.styles = {};
         }
-        return this.styles;
+        return this.styleModel;
     }
 
     public getStylesTmp(_forceUpdate?: boolean): { [key: string]: { [key: string]: any } } {
diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
index 1076d1632..e32fe2fef 100644
--- a/packages/react-components/src/components/timegraph-output-component.tsx
+++ b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -41,6 +41,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private horizontalContainer: React.RefObject<HTMLDivElement>;
 
     private tspDataProvider: TspDataProvider;
+    private styleProvider: StyleProvider;
     private styleMap = new Map<string, TimeGraphRowElementStyle>();
 
     private selectedElement: TimeGraphRowElement | undefined;
@@ -55,6 +56,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         };
         this.onToggleCollapse = this.onToggleCollapse.bind(this);
         this.tspDataProvider = new TspDataProvider(this.props.tspClient, this.props.traceId, this.props.outputDescriptor.id);
+        this.styleProvider = new StyleProvider(this.props.outputDescriptor.id, this.props.traceId, this.props.tspClient);
         this.rowController = new TimeGraphRowController(this.props.style.rowHeight, this.totalHeight);
         this.horizontalContainer = React.createRef();
         const providers: TimeGraphChartProviders = {
@@ -98,6 +100,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     }
 
     async componentDidMount(): Promise<void> {
+        this.setState({
+            styleModel: await this.styleProvider.getStyleModel()
+        });
         this.waitAnalysisCompletion();
     }
 
@@ -117,17 +122,10 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                 } else {
                     columns.push({title: 'Name', sortable: true});
                 }
-                const tspClientResponse2 = await this.props.tspClient.fetchStyles(this.props.traceId, this.props.outputDescriptor.id, QueryHelper.query());
-                const styleResponse = tspClientResponse2.getModel();
-                let styleModel = undefined;
-                if (tspClientResponse2.isOk() && styleResponse) {
-                    styleModel = styleResponse.model;
-                }
                 this.setState({
                     outputStatus: treeResponse.status,
                     timegraphTree: treeResponse.model.entries,
                     columns: columns,
-                    styleModel: styleModel
                 }, this.updateTotalHeight);
             }
             this.chartLayer.updateChart();