Dashing framework: defer rendering until DOM is loaded

Question

---edit--- I asked this question over on the project's Github, and it's been indicated that they're not set up to do what I want: https://github.com/Shopify/dashing/issues/617#issuecomment-142762194

You can't really do that with the DOM, some JavaScript libraries (like React) get around this by having a Virtual DOM which is much faster and then only rendering what actually changed. Batman.js is likely re-rendering everything.

---/edit---

I'm using the Dashing framework to create a dashboard of pull request build statuses, pulling info from Attlassian Stash and Jenkins. The Dashing widget I've created for this is very similar to the default List widget that comes with Dashing.

I intend to display this using a Raspberry Pi outputting HDMI to a TV in my office. I have a problem though, as every time the Dashing widget receives data, the dashboard refreshes quite slowly. List elements pop in individually over the course of a second or two. This is quite visually distracting to me and my team (I've even had complaints from other teams!).

I'm quite inexperienced in html/js, but I would guess that this is due to many DOM tree traversals taking some time on the slow processor. What I would like to do to solve this, is to have the widget create the new DOM in the background, but defer rendering it until the whole thing is ready. In that way, I would hope to see more seamless transitions.

Is this possible, or reasonable within Dashing (or the frameworks/libraries it is built atop (Sinatra, Batman.js))? If not, is there some other path to achieve seamless Dashing updates?

My widget code is as follows:

widgets/branches/branches.coffee:

class Dashing.Branches extends Dashing.Widget

widgets/branches/branches.html:

<h1 class="title" data-bind="title"></h1>

<ul class="items list-nostyle">
  <li class="item" data-foreach-item="items" data-bind-class="item.status">
    <span class="label branch_name" data-bind="item.branch_name"></span>
    <span class="label status" data-bind="item.status"></span>
    <div class="clearfix" />
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

widgets/branches/branches.scss:

$value-color:              #FFF;
$background-color:         #000000;
$background-error-color:   #A31F1F;
$background-passed-color:  #8fb347;
$background-pending-color: #47bbb3;
$background-notbuilt-color: #808080;

$title-color:       rgba(255, 255, 255, 1);
$label-color:       rgba(255, 255, 255, 0.7);

.widget.branches{

  background-color: $background-color;
  padding: 0px;
  vertical-align: top;

  .title {
    color: $title-color;
  }

  ol, ul {
    margin: 0px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
  }

  .items{
    list-style: none;

    li {
      margin-top: 5px;

      &.FAILURE {
        background-color: $background-error-color;
      }

      &.PENDING {
        background-color: $background-pending-color;
      }

      &.NOTBUILT {
        background-color: $background-notbuilt-color;
      }

      &.SUCCESS {
        background-color: $background-passed-color;
      }

      .label {
        display: block;
        color: $label-color;
        font-size: 20px;
        word-wrap: break-word;

        &.branch_name {
          float: left;
          text-align: left;
          padding: 5px 0px 5px 10px;
        }

        &.status {
          float: right;
          text-align: right;
          padding-top: 10px;
          font-size: 14px;
          padding: 11px 11px 5px 5px;
        }
      }
    }
  }
}