Quick navigation results in multiple components(forms) being added to the top-level page

Anvil Q&A
4

When developing hash routing I worked quite hard to get rid of the behaviour you describe.

I think I spent hours creating slow loading forms and hitting navigation buttons and then quickly clicking another navigation button or immediately hitting the browser back forward buttons and making sure there was always a single correct form in the content panel.

What’s happening is that while clicking a navigation button the previous form has not yet been added to the content panel while you invoke the next navigation. If you add print statements between the lines of code it’ll go something like.

A - clear panel
B - instantiate form SlowForm
A - clear panel
B - instantiate form FastForm
C - FastForm instantiated
D - add FastForm to panel 
C - SlowForm instantiated 
D - add SlowForm to panel

Buttons are free to be clicked and invoke their click handler even if the previous click handler has not yet finished.

The way hash routing handles this is three fold.

  1. Forms loaded into the content panel are cached making slow loading forms less frequent.
  2. Navigating to the exact same url hash does nothing.
  3. Keeps a track of the current form using a global variable. Before adding the form to the content panel ensure that the current form matches what we think it is. If it’s something else don’t add this form to the content panel. Also re-clear the content panel after the form is instantiated just in case.

So a click handler that does this might look like.

def nav_link_click(self, sender, **event_args):
    form_name = sender.tag
    if self.current == form_name:
        return

    self.content_panel.clear()
    self.current = form_name
    form_cls = self.name_to_cls[form_name]
    form = form_cls() # this might be slow
    if self.current != form_name:
        return
    self.content_panel.clear() # just in case
    self.content_panel.add_component(form)

:sweat_smile:

Another thing you might consider is exiting immediately if the click handler is still being processed.

def nav_link_click(self, **event_args):
    if self.navigating:
        return
    self.navigating = True
    self.content_panel.clear()
    try:
        self.content_panel.add_component(Form())
    finally:
        self.navigating = False
3 Likes