Scrolling to a RG section - building a digital menu

Hi everyone! I have an app that lets restaurant owners create interactive menus. From restaurant client’s point of view menus look like this:

Some of the menus are quite large and in order to go to “desserts”, or any other section in the end of menu users have to scroll quite a lot. That’s why i am trying add a horizontal scrolling repeating group, that will allow me to reach following behavior:

The way my menu page is organized is a nested RG (RG inside a RG). So, i have an RG with menu categories (ext. vertical scrolling):

and an RG with Menu items in every Menu Category:

I added a horizontal RG with all the Menu categories, and a click on any of them starts “scroll to entry” workflow.
Снимок экрана 2020-11-04 в 13.54.30

The problem is that when it scrolls, “lazy load” of ext. vertical scrolling loads new menu items and Menu Categories, and user ends up being in totally other section: (see from mobile)

I can solve this by making the both RGs a “Full list”, but that it makes my app load for 20-30 seconds, which is an incredibly bad user experience.

What can i do about this issue? How would you solve it? I’ve been struggling to solve this for more than a month, and it’s killing me! Please help!

Are you hiding the images of the menu items while the RG is loading? That could help in getting a better performance for rg loading.

Also, are you sure that you use the images’ url in your menu item cards?

I’ve resolved the loading performance issue I had for a similar app using the Image Compressor plugin, a great plugin.

I see that you have abandoned the horizontal list, which was a great idea, and replaced it by a focus group. That’s also a good idea.

One option would be to load just the categories initially. Then, load only the items in a category when the user selects that category. That alone might improve performance and UX considerably, since you’d be loading only the requested subset of data. It would be a more efficient use of bandwidth as well.

It seems the UI could be implemented either with the categories listed horizontally across the top (like your 2nd design) or as a hierarchical list (more like your 1st design). They key is to use initially-hidden groups for the menu items and then reveal a group (items in a category) when the user selects that category. Data within a group loads only when that group becomes visible.

(BTW, this is a common technique used when creating a single-page application or “SPA”.)