diff --git a/app/javascript/flavours/glitch/features/ui/components/image_loader.js b/app/javascript/flavours/glitch/features/ui/components/image_loader.js index c7360a72647..5e1cf75af79 100644 --- a/app/javascript/flavours/glitch/features/ui/components/image_loader.js +++ b/app/javascript/flavours/glitch/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 (
+ {loading ? (