From 955d5d36e80259d8c10a0246d359f35f63de059d Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sun, 15 Jul 2018 01:18:09 +0200
Subject: [PATCH] Use LoadingBar instead of blur to indicate that an image is
loading (fixes #4060) (#7562)
---
.../mastodon/features/ui/components/image_loader.js | 4 ++++
app/javascript/styles/mastodon/components.scss | 5 +++--
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js
index c7360a726..5e1cf75af 100644
--- a/app/javascript/mastodon/features/ui/components/image_loader.js
+++ b/app/javascript/mastodon/features/ui/components/image_loader.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import { LoadingBar } from 'react-redux-loading-bar';
import ZoomableImage from './zoomable_image';
export default class ImageLoader extends React.PureComponent {
@@ -23,6 +24,7 @@ export default class ImageLoader extends React.PureComponent {
state = {
loading: true,
error: false,
+ width: null,
}
removers = [];
@@ -122,6 +124,7 @@ export default class ImageLoader extends React.PureComponent {
setCanvasRef = c => {
this.canvas = c;
+ if (c) this.setState({ width: c.offsetWidth });
}
render () {
@@ -135,6 +138,7 @@ export default class ImageLoader extends React.PureComponent {
return (
<div className={className}>
+ <LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} />
{loading ? (
<canvas
className='image-loader__preview-canvas'
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 5fa73d58a..b3d8f135f 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1478,6 +1478,7 @@ a.account__display-name {
display: flex;
align-items: center;
justify-content: center;
+ flex-direction: column;
.image-loader__preview-canvas {
max-width: $media-modal-media-max-width;
@@ -1486,8 +1487,8 @@ a.account__display-name {
object-fit: contain;
}
- &.image-loader--loading .image-loader__preview-canvas {
- filter: blur(2px);
+ .loading-bar {
+ position: relative;
}
&.image-loader--amorphous .image-loader__preview-canvas {