Defer Rendering of a Fragment's Content

By default, a fragment loads immediately when its page renders, but you can change this behavior so a page renders faster initially. For example, say an Incidents page has three tabs—List, Map, and Schedule—all defined in separate fragments. When the Incidents page needs only the contents of the List fragment to display, you can wrap the Map and Schedule fragments in an oj-defer element to delay the rendering of those fragments at runtime.

What triggers hidden fragments to render is configurable. It could be a button click, selecting a tab, opening a dialog, or an oj-bind-if that uses conditions to display content. In these cases, UI events or application state determines when the fragment is loaded. In the Incidents example, the hidden Map or Schedule fragment renders on the page only when a user clicks either tab to view its content:

Description of the illustration fragment-incidents.png

You can also delay a fragment from rendering until it is "visible". Say, your page has a lot of content that encourages users to scroll. Rather than load the entire page, including sections hidden from the viewport, you might want to load some sections only when the user brings them into view. In this case, you can section your page into different fragments, then add a trigger to render a fragment only when it comes into view.

To set up a fragment for deferred rendering:

1. Open the web application's page that contains fragments.
2. Select the fragment container whose content you want to render later, either on the canvas or in the Structure view.
3. Right-click the container, select Surround, then Defer.
   
   

   
   Description of the illustration fragement-defer.png

   
   

   The Defer element is added to the fragment container, both on the canvas and in Structure view. If you click Code view, you'll see oj-defer surrounding oj-vb-fragment. Here's a code snippet for the Incidents tab bar with List, Map, and Schedule tabs, where everything except the first tab is hidden initially:

   <oj-tab-bar selection="{{ $variables.incidents }}">
   <ul>
     <li id="list">List</li>
     <li id="map">Map</li>
     <li id="Schedule">Schedule/li>
   </ul>
   </oj-tab-bar>
   <oj-switcher value="[[ $variables.incidents ]]">
     <div slot="list">
         <oj-vb-fragment id="incidentslist" name="incidentsList"></oj-vb-fragment>
     </div>
     <div slot="map">
       <oj-defer>
         <oj-vb-fragment id="incidentsmap" name="incidentsMap"></oj-vb-fragment>
       </oj-defer>
     </div>
     <div slot="schedule">
       <oj-defer>
         <oj-vb-fragment id="incidentsschedule" name="incidentsSchedule"></oj-vb-fragment>
       </oj-defer>
     </div>
   </oj-switcher>