Stamp dom-if templates ahead of time to delegate wait to slash screen?

[Darin Hensley]

I have a template with 9 custom elements(cards). When the user first clicks on menu item to show the template, there is a significant-enough-performance hit that I notice in the page slide animation. Is there away to stamp these templates ahead of time? I know the rule of thumb is to stamp them at the time the user chooses to use them, but I would rather have these stamped(but not shown of course) during the splash screen. 

<dom-module id="portfolio-display">

  <style>

    :host[show] {

      background-color: var(--paper-grey-50);

     }

    #main {

      width: 100%;

      margin-top: 50px;

    }

   

    .spacer {

      width: 8px;

    }

  </style>

  <template>

    <template is="dom-if" if="{{show}}">

      <iron-media-query query="(min-width: 1700px)" query-matches="{{largeSizeScreen}}"></iron-media-query>

      <iron-media-query query="(min-width: 700px) and (max-width: 1699px)" query-matches="{{midSizeScreen}}"></iron-media-query>

      <iron-media-query query="(max-width: 699px)" query-matches="{{smallSizeScreen}}"></iron-media-query>

      <div id="main">

        <div class="layout vertical center center" hidden$="{{!largeSizeScreen}}"> 

          <div class="layout horizontal">

            <other-card></other-card>

            <div class="spacer"></div> 

            <cloud-share-image-card></cloud-share-image-card>

            <div class="spacer"></div> 

            <cloud-monitor-card></cloud-monitor-card>

          </div>

          <div class="layout horizontal">

            <legacy-other-card></legacy-other-card>

            <div class="spacer"></div> 

            <dad-site-card></dad-site-card>

            <div class="spacer"></div> 

            <krunch-uploader-card></krunch-uploader-card>

          </div>

          <div class="layout horizontal">

            <gulp-newy-card></gulp-newy-card>

          </div>

        </div>

        <div class="layout vertical center center" hidden$="{{!midSizeScreen}}"> 

          <div class="layout horizontal">

            <other-card></other-card>

            <div class="spacer"></div> 

            <cloud-share-image-card></cloud-share-image-card>

          </div>

          <div class="layout horizontal">

            <cloud-monitor-card></cloud-monitor-card>

            <div class="spacer"></div> 

            <legacy-other-card></legacy-other-card>

          </div>

          <div class="layout horizontal">

            <dad-site-card></dad-site-card>

            <div class="spacer"></div> 

            <krunch-uploader-card></krunch-uploader-card>

          </div>

          <div class="layout horizontal">

            <gulp-newy-card></gulp-newy-card>

          </div>

        </div>

        <div class="layout vertical center center" hidden$="{{!smallSizeScreen}}"> 

          <other-card></other-card>

          <cloud-share-image-card></cloud-share-image-card>

          <cloud-monitor-card></cloud-monitor-card>

          <legacy-other-card></legacy-other-card>

          <dad-site-card></dad-site-card>

          <krunch-uploader-card></krunch-uploader-card>

          <gulp-newy-card></gulp-newy-card>

        </div>

      </div>

    </template>

  </template>

  <script>

    Polymer({

      is: "portfolio-display",

      properties: {

        show: {

          type: Boolean,

          value: false

        }

      }

    });

  </script>

</dom-module>

[Rob Dodson]

Would it be possible to have them in the page but just hidden? IOW, not using dom-if at all?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0cb166f7-ed3e-4524-9b65-31968262bff3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Darin Hensley]

I used hidden$="{{show}}" instead which significantly improved the experience. Sorry about the fundamental question, I was just dreading side effects of the code change. On one template there were none, but on another the layout got messed up. But that's ok...the main template that was taking the longest works great with hidden. 

Thanks,

-Darin