We have an Ionic 4 app which is also being deployed as a web app. It’s nice that Ionic 4 lazy loads all of its components - it greatly reduces the bundle size. However we’re running into issues when it comes to user interactions that trigger lazy loaded components.
As an example, we have a button which triggers a Popover. When deployed as a website, there is a noticeable delay between tapping the button and the popover being displayed (as both the Ionic popover components and the component being rendered in the popover are lazy-loaded).
Once it has loaded once everything is fine but we are finding that the more impatient users are tapping the button several times because it looks broken and then several popovers all appear at once on top of each other.
We have tried using both service workers (via
ng add @angular/pwa) and
PreloadAll route preload strategy but neither seems to help with the above case. Is there a way - either via Ionic or Stencil - to mark certain components (like Popovers or Radio buttons, for example) as more important so that they can be eager loaded when the application first runs?