[Enhancement] Better Browsing Experience

[HAHOOS]

I think it would be best to have the lobbies only show when everything is ready, something like mod.io has.
Also make settings smaller and a popup or move it to the left side while having lobbies on the right side.
Maybe even make the More info appear as a pop up.

This POTENTIALLY could decrease the CLS on the desktop, making it more likely for Google to index the website.

[HAHOOS]

I will most likely implement it using a Skeleton Loader. possibly something like phantom-ui

[HAHOOS]

Implemented the skeleton loader, which improved CLS on desktop, but on mobile its even worse than before

Before change:

After change:

[mashedram]

For performance, I've noticed you load each thumbnail for every server at full resolution. This can easily account for a lot of 1920x1080 images. The size of these images on the screen are quite small though.

Downscaling these on the server to something like 480x270 probably wouldn't cause a noticable loss of quality, but would reduce your network usage by 16 times.

[mashedram]

For example, looking at the PageSpeed test you posted in your thread on discord, a single image(https://fusionapi.hahoos.dev/thumbnail/2380732) already accounts for ~80% percent of your payload.

[HAHOOS]

Hey @mashedram ! I never intended for the thumbnails to be in 1920x1080. I've noticed that issue a while ago. Generally the mod.io API is supposed to give me the thumbnail in 320x180 format, but some mods such as 7/11 the one u mentioned return the 1920x1080. I'm probably gonna contact mod.io support to ask about it and in the meantime apply a workaround, though its gonna probably slow things down on the backend

[mashedram]

You serve the images from a source you control though, you could definitly resize them and cache them on the server and serve the smaller versions on a different route.

Example:
Full resolution images: thumbnail/full/{ID}
Small resolution images: thumbnail/small/{ID}

This way you also prevent sending a lot of image requests to mod.io and potentionally hitting rate limits.

[HAHOOS]

Be aware that the backend is open source, so the way it works is not unknown. I already cache the images to avoid hitting the rate limit (though it would unlikely hit it, as im using the game token, and i have been allowed by mod.io to use it for now, though they cannot guarantee they won't disable it later).

If you were to look at mod.io's API, you would see that they provide a logo object, where they provide several links to different icons/thumbnails. One of them is thumb_320x180. For some reason in case of mods like 7/11 this provides a high res image (which is not how its supposed to work). I will be reporting that to their support, as it probably also impacts their website, not just mine.

And by "workaround" I did mean resizing the images, though like I said, this could potentially slow things down on the backend by quite a lot if a cached thumbnail does not exist or the cache is expired and needs to be fetched again.

[mashedram]

Ah, I understand what you mean now. I don't think downscaling would have as much of a performance hit as you expect, but tackling the problem at the source would indeed be better.