POS Navigation API - Input delay increasing with each navigation

Extensions
1

Hello, I’m currently in the process of migrating one of our pos.home.modal.render extensions to the new POS web components (2026-04) and have noticed what appears to be a fairly major problem with the Navigation API.

It appears that the longer the extension is operating there is an increase in input lag as we navigate to and from pages, with each navigation adding additional delay which becomes very noticeable after navigating back and forward around 10 times. This is reproducible in my dev environment by simply navigating forward and back 10 times, as the navigation count progresses the delay increases, it happens on both iOS and Android.

I was planning to release this change next week but I’m not sure I can in it’s current state :disappointed_face:

EDIT - This behaviour doesn’t seem to be there with a minimal example so it’s something I’ve done in the extension, trying to track down the cause now.

2

So it appears it was due to passing a cache data object in the navigation state, which I assume over time is bloating the navigation history entries and slowing everything down. That plus I was passing around an uncapped array of breadcrumbs via the state for troubleshooting purposes, but the issue seems to mostly be caused by the cache object.

I’m guessing we should be using the Storage API to pass this sort of data between pages? I initially thought that it might be nice to only load the data from storage once and then rely on the state to pass it around but it seems this will not work in practice.

3

@simon_b can you provide some reproduction code? Maybe it’s a memory leak? Thanks!

4

Hi @JS_Goupil no worries, I’ll see if I can recreate the problem in a minimal example when I’m next working.

I created a wrapper around the navigation call to load up the state with the cache and breadcrumbs each time it was called, like this:

const navigate = (url = "/", state = {}) => {
    return navigation.navigate(url, {
      state: {
        ...state,
        breadcrumbs,
        cache,
        settings,
        // etc.
      },
    });
  };

After a few times calling this the input delay when navigating became very noticeable. Removing the cache has resolved it.

5

@simon_b for what it’s worth, we recently learned some hard lessons about the differences in memory management on chromium based browsers (Android devices) and Safari (iOS, WebKit based). Chrome is much less helpful at cleaning up workers that may be retaining old callbacks accidentally.

Just out of curiosity, have you been able to test this on Android and iOS? I know you mentioned you found the problem in your code, but it would be a cool learning to share here!

6

Yes two very different beasts it seems. That was the first thing I checked actually, made sure I wasn’t leaving behind any subscriptions open.

I did test this on both iOS and Android, both on physical devices, and the issue occurred on both. The cache object just contained JSON responses from my web server, I’m loading it from storage every time we navigate now instead and the issue seems to be gone.

It’s the weekend here now but come Monday I’ll see if I can reproduce this some how with a new empty project for you.