lazy load demo

www/examples.md

@@ -14,3 +14,4 @@ You can copy and paste them and then adjust them for your needs.
 | [Click To Edit](/examples/click-to-edit) | Demonstrates inline editing of a data object
 | [Bulk Update](/examples/bulk-update) | Demonstrates bulk updating of multiple rows of data
 | [Click To Load](click-to-load) | Demonstrates clicking to load more rows in a table
+| [Lazy Loading](lazy-load) | Demonstrates how to lazy load content

www/examples/lazy-load.md

@@ -0,0 +1,61 @@
+---
+layout: demo_layout.njk
+---
+        
+## Lazy Loading
+
+This example shows how to lazily load an element on a page.  We start with an initial
+state that looks like this:
+
+```html
+<div kt-get="/graph" kt-trigger="load">
+  <img class="kutty-indicator" width="200" src="/img/bars.svg"/>
+</div>
+```
+
+Which shows a progress indicator as we are loading the graph.  The graph is then
+loaded and faded gently into view via a settling CSS transition:
+
+```css
+.kutty-settling img {
+  opacity: 0;
+}
+img {
+ transition: opacity 300ms ease-in;
+}
+```
+
+<style>
+.kutty-settling img {
+  opacity: 0;
+}
+img {
+ transition: opacity 300ms ease-in;
+}
+</style>
+
+{% include demo_ui.html.liquid %}
+
+<script>
+    server.autoRespondAfter = 2000; // longer response for more drama
+
+    //=========================================================================
+    // Fake Server Side Code
+    //=========================================================================
+
+    // routes
+    init("/demo", function(request, params){
+      return lazyTemplate();
+    });
+    
+    onGet("/graph", function(request, params){
+      return "<img  src='/img/tokyo.png'>";
+    });
+    
+    // templates
+    function lazyTemplate(page) {
+      return `<div kt-get="/graph" kt-trigger="load">
+  <img class="kutty-indicator" width="200" src="/img/bars.svg"/>
+</div>`;
+    }
+</script>