Unfloyded/Legamunt
0
0
Fork 0
Code Activity

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

Browse source
This commit is contained in:
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
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'