Pokedex

[wanton bear]

This is my first try with Qwik and I decided to go along with the pokeapi v2 to build something fun.

Link: https://pokedex-qwik.vercel.app
Github: https://github.com/VSevagen/Pokedex---Qwik-QwikCity

Since this is my first try at Qwik, please let me know if there is anything I could improve on this project

[young oak]

Looks cute! good job 👌

[upper folio]

I see a flash during load. The SSR version looks fine, then a flash, then looks fine again.

Ah ok. On mobile, it changes the amount of Pokemons to load, which makes it load again.
I think you should make the load amount decision inside the fetcher?

[wanton bear]

I'm fetching the pokemons inside a useResource$ which tracks the limit value for the number of pokemons.
On mobile, the limit is 10 and on desktop the limit is 16. However, in order to determine the limit, I have a function called isMobile which will check whether window.visualViewport.width <= 992px. As you may have guessed, I'm running it in a useVisibleTask$ since I cannot access window in useTask$.
I see that there is an option for { strategy: 'document-ready' } in useVisibleTask$. I'll try and see if it prevents that flash

[upper folio]

No, because you track the isMobile in the task, it will cause the task to run when you change isMobile.
Really though, your fetch logic is a little bit wrong: You should only fetch if you don't have enough data cached to show the pokemons up to that point

Reading your code some more, I would keep a cache of the pokemons in a store and I would do my own loading rendering instead of useResource

Here's the code for Resource, it's just an Inline Component, nothing magical: https://github.com/BuilderIO/qwik/blob/2e96ae030a299e66191627352cb9252057064409/packages/qwik/src/core/use/use-resource.ts#L261-L303

So you can do that same thing, keeping an array of Pokemon and when you need to show beyond what you loaded, show the spinner

BTW, nice project, looks good 🙂

[wanton bear]

So I fetch once and I keep the data in a store. I can then do my own loading rendering with the data I have until I reach a point where I have no choice but to fetch new data. (for example, user want to go to second page of pokemon lists).