diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index 13c44583..14e96475 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 45120a60..f71ee35b 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 00000000..c25266ca
--- /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 48578f05..8b9452c0 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 16bc5bbc..aaaff974 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -10,9 +10,9 @@