Mount without diffing or redrawing everything

Asked By: Anonymous

I have a simple interface that just renders a bunch of table to track our data. It takes about 3 seconds to render everything (thousands of table rows, that is just because of brand new data and other things, not the norm). All I want to do now is have a button that mounts a modal. The only problem is that it must be redrawing/diffing all those tables taking about 3 seconds to finish and only about 100ms to then mount the modal thereafter.

I tried changing the redraw strategy before it mounts, but that didn’t seem to help.

Solution

Answered By: Anonymous

You can avoid diff calculation for specific parts of your application by using the subtree directive in your views.

One way of ensuring the application doesn’t needlessly recalculate the main view when you mount your modal would be to have the modal component’s controller (which will execute before views are executed and drawn) set a flag, then have the modal component’s root element config (which will execute after views are executed and drawn) reset the flag.

You can then nest your main application component inside a wrapping component which whose view will conditionally return a subtree directive if the flag is set:

var modalMounting = false

var AppWrapper = {
  view : function(){ return (
    m( '.AppWrapper',
      modalMounting
        ? { subtree : 'retain' }
        : m( Application )
    )
  ) }
}

// Later & elsewhere...

m.mount(
  document.querySelector( '.ModalMountpoint' ),

  {
    controller : function(){
      modalMounting = true
    },

    view : function(){ return (
      m( '.ModalWrapper', {
        config : function(){
          modalMounting = false
        }
      },
        m( Modal )
      )
    ) }
  }
)