This is a log of stuff I did w/ one of my random pet projects, it’s not terribly interesting and is mostly just so I can get into the habit of writing more. You have been warned.

I worked a bit more on mealplanner and managed to implement infinite scrolling for the recipe search (so you can actually see every search result) and a detailed recipe view.

Infinite scrolling

Infinite Scrolling GIF

This was a simple change. The Vue component library I’m using has an infinite scrolling implementation already, so it was just a matter of using it.

There were some interesting bits in making the UX smooth when resizing the window. For example, the amount of recipes to fetch at a time is now dynamic, based on the amount of space that’s available to display them. This way, the space is always completely filled, except at the end of the result set.

Detailed recipe view

Recipe Card Details Launch Icon Recipe Details Modal Top Recipe Details Modal Bottom

Also a pretty straightforward change. Clicking on the magnifying glass launches the recipe detail modal. Most of the work was just styling the modal.

One interesting thing I noticed, the CSS cursor: pointer in a Tauri app in Windows is just a normal mouse pointer, rather than the little hand I’m used to. Which means I can’t rely on it to distinguish clickable things from things that are not. I decided to stick to adding a slight highlight on hover as a replacement mechanism. Actually, no wait… maybe this is because I’m going through WSL??? Hmm.

Faster search result loading

One other thing I managed to squeeze in was an improvement to search performance. Originally, recipes were loaded from recipe databases along with their associated images. This was mostly for expedience so I could get something working quickly, but loading multiple MB worth of images w/ each image in the result set creates a noticeable delay before they are displayed. Didn’t want that.

Now the image loading code has been extracted to a new ImagesStore. Recipes are loaded w/ just the IDs of their associated images, and the UI resolves these IDs using the ImagesStore on demand. So effectively, the search results are displayed without images, and then the Images are loaded in parallel (as would be normal on a website).

The ImagesStore also implements a simple LRU cache to keep images in memory as long as they are consistently used.