threejs traverse doesnt iterate descendants - three.js

Question

I'm using a-frame and loading a gltf file, constructing HTML DOM from JavaScript with JQuery like this:
let arHolder = $('#arHolder');
let gltfFilePath = MY_GLTF_PATH;
// Build the scene
let sceneElement = document.createElement('a-scene');
sceneElement.setAttribute("embedded", '');
sceneElement.setAttribute("arjs", '');
let markerElement = document.createElement('a-marker');
markerElement.setAttribute("preset", 'hiro');
let glftElement = document.createElement('a-entity');
glftElement.setAttribute("id", 'glftElement');
glftElement.setAttribute("gltf-model", gltfFilePath);
let cameraElement = document.createElement('a-entity');
cameraElement.setAttribute("camera", '');
markerElement.append(glftElement);
sceneElement.append(markerElement);
sceneElement.append(cameraElement);
arHolder.append(sceneElement);
sceneElement.addEventListener("loaded", (event) => {
var gltfScene = document.querySelector('#glftElement').object3D;
gltfScene.traverse( function( node ) {
console.log(node);
console.log("NAME:", node.name);
});
});
I believe that I should get a list of the names of the objects in the gltf scene as traverse is meant to go down into the descendants (i.e. children) of the gltf scene and get every item. However, I just get the one top node.
If I inspect the gltfScene object in the Chome console I can see the meshes in the gltf scene.
Any idea why this isn't working, please?
Thank you.

Answer 1

Piotr was correct. The gltf model hadn't loaded.
This solves it:
document.querySelector('#glftElement').addEventListener("model-loaded", (event) => {
var gltfScene = document.querySelector('#glftElement').object3D;
gltfScene.traverse( function( node ) {
console.log(node);
});
});