From fcfe409633fb959f43a3d9be0635628b87de5fec Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 22 Jan 2018 21:47:29 -0800
Subject: [PATCH] add loading indicator for images

---
 routes/_components/Avatar.html | 14 ++++----------
 routes/_components/Media.html  | 13 ++++++++++++-
 routes/_utils/events.js        | 19 +++++++++++++++++++
 scss/themes/_base.scss         |  1 +
 templates/2xx.html             |  4 ++--
 5 files changed, 38 insertions(+), 13 deletions(-)
 create mode 100644 routes/_utils/events.js

diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index 13c4458..14e9647 100644
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@@ -4,7 +4,7 @@
 </svg>
 {{else}}
 <img class="{{className}} avatar" aria-hidden="true" alt=""
-     src="{{account.avatar}}" on:loadError="set({error: true})" />
+     src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
 {{/if}}
 <style>
   .avatar {
@@ -18,17 +18,11 @@
   }
 </style>
 <script>
+  import { imgLoadError } from '../_utils/events'
+
   export default {
     events: {
-      loadError (node, callback) {
-        node.addEventListener('error', callback)
-
-        return {
-          teardown () {
-            node.removeEventListener('error', callback)
-          }
-        }
-      },
+      imgLoadError
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/Media.html b/routes/_components/Media.html
index 45120a6..f71ee35 100644
--- a/routes/_components/Media.html
+++ b/routes/_components/Media.html
@@ -30,7 +30,10 @@
            playsinline
     />
     {{else}}
-      <img alt="{{media.description || ''}}"
+      <img class="{{!imageLoaded ? 'image-loading' : ''}} {{imageError ? 'image-error' : ''}}"
+           on:imgLoad="set({imageLoaded: true})"
+           on:imgLoadError="set({imageError: true})"
+           alt="{{media.description || ''}}"
            src="{{media.preview_url}}"
            width="{{getSmallWidth(media)}}"
            height="{{getSmallHeight(media)}}"/>
@@ -65,6 +68,9 @@
   .no-native-width-height img, .no-native-width-height video {
     background-color: var(--mask-bg);
   }
+  .status-media img.image-loading, .status-media img.image-error {
+    background: var(--loading-bg);
+  }
   .status-media {
     max-width: calc(100vw - 40px);
     overflow: hidden;
@@ -106,6 +112,7 @@
   const DEFAULT_MEDIA_WIDTH = 300
   const DEFAULT_MEDIA_HEIGHT = 200
 
+  import { imgLoad, imgLoadError } from '../_utils/events'
   import { showVideoDialog } from '../_utils/showVideoDialog'
 
   export default {
@@ -121,6 +128,10 @@
       async onClickPlayVideoButton(media, width, height, description) {
         showVideoDialog(media.preview_url, media.url, width, height, description)
       }
+    },
+    events: {
+      imgLoad,
+      imgLoadError
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_utils/events.js b/routes/_utils/events.js
new file mode 100644
index 0000000..c25266c
--- /dev/null
+++ b/routes/_utils/events.js
@@ -0,0 +1,19 @@
+export function imgLoadError (node, callback) {
+  node.addEventListener('error', callback)
+
+  return {
+    teardown () {
+      node.removeEventListener('error', callback)
+    }
+  }
+}
+
+export function imgLoad (node, callback) {
+  node.addEventListener('load', callback)
+
+  return {
+    teardown () {
+      node.removeEventListener('load', callback)
+    }
+  }
+}
\ No newline at end of file
diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss
index 48578f0..8b9452c 100644
--- a/scss/themes/_base.scss
+++ b/scss/themes/_base.scss
@@ -58,6 +58,7 @@
   --mask-bg: $toast-bg;
   --mask-svg-fill: $secondary-text-color;
   --mask-opaque-bg: rgba($toast-bg, 0.8);
+  --loading-bg: #ededed;
 
   --deemphasized-text-color: #666;
   --focus-outline: $focus-outline;
diff --git a/templates/2xx.html b/templates/2xx.html
index 16bc5bb..aaaff97 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -10,9 +10,9 @@
 
 	<style>
 /* auto-generated w/ build-sass.js */
-body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#c5d1f6}
+body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6}
 body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.3;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}main{position:relative;width:602px;max-width:100vw;padding:15px 0;box-sizing:border-box;margin:15px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}
-body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--deemphasized-text-color:#666;--focus-outline:#bfbfbf}
+body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf}
 
 </style>