Sprite sometimes doesn't load in Phaser game - reactjs

Question

Sometimes the game starts without waiting for all the assets to load. This happens most often with the spaceStation which is the largest sprite at 3372x700 px. When the game first boots, the spaceStation isn't loaded. But if you leave the game then come back to it without refreshing the page, it will be loaded the second time. I am using the Phaser game engine with the IonPhaser wrapper for React.
The game is hosted here so you can see what I mean: https://seanhetzel.github.io/star-runner/#/
Here is my code for the spaceStation sprite:
import spaceStation from "../assets/space-station-sprite-sheet.png";
// other stuff...
preload: function() {
// other stuff...
const spaceStationImg = new Image();
spaceStationImg.onload = () => {
this.textures.addSpriteSheet("spaceStation", spaceStationImg, {
frameWidth: 3372,
frameHeight: 700
});
};
spaceStationImg.src = spaceStation;
// other stuff...
}
// other stuff...
create: function() {
// other stuff...
const config = {
key: "lights",
frames: this.anims.generateFrameNumbers("spaceStation", {
start: 0,
end: 6
}),
frameRate: 3,
repeat: -1
};
this.anims.create(config);
this.spaceStation = this.impact.add
.sprite(1686, 350, "spaceStation")
.play("lights")
.setDepth(1);
// other stuff...
}
Am I not loading it correctly?
Thanks!

Answer 1

The Phaser 3 Loader should use the imported sprite instead of pointing directly to the relative path in the preload() function when using react.
import spaceStation from "../assets/space-station-sprite-sheet.png";
// other stuff...
this.load.spritesheet(
'spaceStation',
spaceStation, // <-- not '../assets/space-station-sprite-sheet.png'
{
frameWidth:3372,
frameHeight:700
}
);
Now it’s getting the sprite from import spaceStation from "../assets/space-station-sprite-sheet.png"; import instead of directly pointing to the relative path and using the Phaser 3 Loader.