Use of pre-caches and React Suspense with useTransition

Hi there,

So, so far the site is quite fine, still have many things to fix and develop but I will finish soon to spend time with new projects.

This blog post today is writing about effect when we change from 1 picture to another one with the use of fetch() method.

The issue is, I have set the height of Modal flexible, depend on the picture. Because the picture dimension might be vary. It leads to an effect that, whenever we click the next/previous button, even though the fetch() method is fast, modal will always shrink and rise back up in height.

Therefore, I have come up with 2 resolutions.

The first one is fix the height of pictures’ container/using skeleton (but as I have said, picture dimension might be vary, so we can not do that).

The second one is: We will keep the previous picture in the modal, in the meantime, fetch() method will run and get the data back. When we have the new picture back, then we start to replace the old one. This approach might be better, but technique is hard. I must research a possible one in this link Pre caching image with React Suspense.

Basically, the idea is that we use Promise to store the previous picture in cache, then when we got back the data, we process the replacement later. By that solution, I am confident that the issue was solve and we have a better experience when go through the site. In the future, I might experiment when fetching the pagination as well.