Model should be visible only after the progress bar complete its loading

[aiswaryapramod]

@elalish In model-viewer, I want the model to be visible only after the progress bar complete its loading.

[elalish]

I believe that's how it works by default. Can you show us the problem you're having?

[elalish]

Are you just using a plain MV element, or adding a bunch of your own JS? This is exactly what our poster is for - have you tried that? I would need to see your page to give any more insight.

[aiswaryapramod]

Vite.+.React.-.Google.Chrome.2024-04-16.11-14-16.mp4

Initially the table, chairs, and bench all appear, and then after the loading completes, only the chairs and bench disappear. This is my issue.

[elalish]

That's certainly strange, but you didn't answer my question - are you using your own JS to do extra stuff to MV? Can you give us a link to this URL so we can repro?

[aiswaryapramod]

This is my code

const viewerRefhome = useRef(null);
const [showChair, setShowChair] = useState(false);
const [showBench, setShowBench] = useState(false);
const [showChairColorButtons, setShowChairColorButtons] = useState(false);
const [showBenchColorButtons, setShowBenchColorButtons] = useState(false);
const [isIOS, setIsIOS] = useState(false);

useEffect(() => {
showCarModel();
setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent));
}, []);

useEffect(() => {
const mv = document.querySelector("model-viewer");
const handleProgress = () => {
if (!showBench) toggleObjectVisibility("bench", false);
if (!showChair) toggleObjectVisibility("chair", false);
};
mv.addEventListener("progress", handleProgress);

return () => mv.removeEventListener("progress", handleProgress);

}, [showBench, showChair]);

const showCarModel = () => {
const modelViewer = viewerRefhome.current;
modelViewer.src = "/model/dining.glb";
toggleObjectVisibility("chair", false);
toggleObjectVisibility("bench", false);
};

const toggleObjectVisibility = (objectName, visible) => {
const mv = document.querySelector("model-viewer");
const sceneSym = Object.getOwnPropertySymbols(mv).find(
(x) => x.description === "scene"
);
const object = mv[sceneSym].children[0].getObjectByName(objectName);
if (object) object.visible = visible;
};

const handleChairButtonClick = () => {
toggleObjectVisibility("chair", true);
setShowChairColorButtons(true);
};

const handleNochairButtonClick = () => {
toggleObjectVisibility("chair", false);
setShowChairColorButtons(false);
};

const handleBenchButtonClick = () => {
toggleObjectVisibility("bench", true);
setShowBenchColorButtons(true);
};

const handleNobenchButtonClick = () => {
toggleObjectVisibility("bench", false);
setShowBenchColorButtons(false);
};

const applyColor = (materialName, color) => {
const model = viewerRefhome.current.model;
const material = model.materials.find((mat) => mat.name === materialName);

if (material) {
  if (materialName !== "safecage") {
    material.pbrMetallicRoughness.setBaseColorFactor(color);
  }
}

};

const handleSnapshotButtonClick = () => {
const modelViewer = viewerRefhome.current;
const snapshotDataUrl = modelViewer.toDataURL();

const link = document.createElement("a");
link.href = snapshotDataUrl;
link.download = "model_snapshot.png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

};

const handleFullscreenButtonClick = () => {
const modelViewer = viewerRefhome.current;
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
modelViewer.requestFullscreen();
}
};

[elalish]

This sounds like a bug in your code, not MV. If you can make a minimal repro that shows MV is behaving incorrectly, I'll be happy to take a look.