Step 4 : More cats while waiting!

index.html

@@ -10,7 +10,7 @@
         <h1>WebComponents workshop</h1>
         <p>In this workshop, we will create new custom HTML Components</p>
 
-        <cat-img></cat-img>
+        <cat-img-fast></cat-img-fast>
 
         <hr>
         <div>
@@ -37,5 +37,6 @@
             }
         </script>
         <script src="src/components/cat-img.js"></script>
+        <script src="src/components/cat-img-fast.js"></script>        
         </body>
 </html>

src/components/cat-img-fast.js

@@ -0,0 +1,20 @@
+class CatImgFastElement extends CatImgElement {
+
+    constructor(){
+        super();
+    }            
+
+    render(){
+        console.log(`rendering with ${this.xsize} ${this.ysize}`);
+        this.innerHTML = `
+        <h1>Here comes a better image</h1>
+        <img height=${this.ysize} width=${this.xsize}
+            src="http://lorempixel.com/${this.xsize}/${this.ysize}/cats"
+            style="background: no-repeat center/90% url('src/img/cat-loading.gif');"
+        </img>`;
+    }    
+}
+
+window.customElements.define(
+                'cat-img-fast',
+                CatImgFastElement);