diff options
author | ThibG <thib@sitedethib.com> | 2018-07-15 01:18:09 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2018-07-15 01:18:09 +0200 |
commit | 955d5d36e80259d8c10a0246d359f35f63de059d (patch) | |
tree | 46f7b0e1eef13f239e69d7bdec1350a980bcd339 /app/javascript/mastodon/features/ui/components/image_loader.js | |
parent | af161e849dcad223a03bd95df3804443533144a4 (diff) |
Use LoadingBar instead of blur to indicate that an image is loading (fixes #4060) (#7562)
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/image_loader.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/image_loader.js | 4 |
1 files changed, 4 insertions, 0 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' |