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 @@
{{else}}
+ src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
{{/if}}
\ 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}}
- 
@@ -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
}
}
\ 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 @@