To give a bit of context, I'm building a web app using Svelte/Svelte kit and node js et psql which is like a market place for players of a certain video game. Players can come on the website, connect and then put their items on sale through a formular. Then, the offer with the specific characteristics entered by the seller is visible by all the user visitors.
There are two types of items equipment (hat, belt, ring, etc...) and weapons. For the equipments, the system works perfectly but it doesn't work correctly for weapons, the damages are not displayed
First, let me show you a correct example and the problem as well as the code I use.
To solve this issue I first try to investigate why there is this kind of blinking when the page is loading that makes the damages of the weapon disappear.
To have a better understanding of what is happening during the load of the page, I used Goggle light House. As you can see from the screen below the damages appear at first but then there is another phase of rendering and they disappear.
Nevertheless, I couldn't identify clearly what was inside this rendering that make the damages disappearing.
So then, I tried to investigate in my code and I found something very interesting that might solve the problem if I fix it but I can't figure what.
And something that I found strange as well is when hardcode in my script the item, I have the same issue between the browser and the VsCode terminal but the damages are displayed on the itemcard.
So I'm a bit stuck right now and I asking for help. I hope my explications are clear
Given that the URL and tab icon change, this looks like a hard navigation so some blinking is to be expected. Probably because the button causes a form submission; make sure to use the
enhanceaction to update the page dynamically instead.When things are shown first and then disappear that suggests that server-side rendering worked correctly but something on the client-side did not. Maybe some of the
datais used non-reactively.