alex
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use LoadingBar instead of blur to indicate that an image is loading (fixes #4060) (#7562)

signup-info-prompt
ThibG 2018-07-15 01:18:09 +02:00 committed by Eugen Rochko
parent af161e849d
commit 955d5d36e8
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/features/ui/components/image_loader.js
View File

@ -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'

5
app/javascript/styles/mastodon/components.scss
View File

@ -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 {