"Style is not done loading" error

Maps SDK for Web (JavaScript)
#1

Hello, I am simply trying to add a layer where on the layer, it draws a straight line between two coordinates. But once I do, I get the error: Style is not done loading. Please help me fix this.
See below my implementation.

// Initialization of the map
const tt = await import('@tomtom-international/web-sdk-maps');
                await import ('@tomtom-international/web-sdk-maps/dist/maps.css');
                    map.current = tt.map({
                    key: process.env.TOMTOM_KEY,
                    container: mapElement.current.id,
                    center: markerP1,  //markerP1 is an array of longitude, latitude coordinates
                    zoom: 15
                })
//adding the layer to the map, with LineString between given coordinates.
map.current.addLayer({
    id:"12345",
    type: "line",
    source : {
        type: 'geojson',
        data : {
            type: 'Feature',
            features : [
                {
                    type :"Feature",
                    geometry : {
                        type : "LineString",
                        coordinates : [
                            [clientCoords.long,clientCoords.lat],
                            [details.stockistCoords.long,details.stockistCoords.lat]
                        ]
                    }
                }
            ]
        }
    },
    layout : {
        "line-cap": "round",
        "line-join": "round"
    },
    paint :{
        'line-color': '#ff0000',
        'line-width': 9
    },
})
#2

You can move addLayer code into a listener that will wait for a load event of a map.

map.current.on('load', function() {
    map.current.addLayer(...)
})
#3

Thank you @maloleps for the response. Thanks as well for your solution, the error no longer shows. I appreciate your help.