diff options
author | Claire <claire.github-309c@sitedethib.com> | 2022-07-22 20:49:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-22 20:49:54 +0200 |
commit | 85d0e3474574d82fc653925560d2905cee43287e (patch) | |
tree | 20a7c49c820e8b5b7e2389408b6d8deb55fa1119 /app/javascript/flavours/glitch/features/ui/components/image_loader.js | |
parent | 0a61b000e3f10e9be3d8ae1cccf53caa3877a55a (diff) | |
parent | 1ceebf2710794dc35211a16ad3af7f834641a2ab (diff) |
Merge pull request #1810 from ClearlyClaire/glitch-soc/merge-upstream
Merge upstream changes
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/image_loader.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/image_loader.js | 26 |
1 files changed, 15 insertions, 11 deletions
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 c6f16a792..dfa0efe49 100644 --- a/app/javascript/flavours/glitch/features/ui/components/image_loader.js +++ b/app/javascript/flavours/glitch/features/ui/components/image_loader.js @@ -1,10 +1,10 @@ -import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react'; import { LoadingBar } from 'react-redux-loading-bar'; import ZoomableImage from './zoomable_image'; -export default class ImageLoader extends React.PureComponent { +export default class ImageLoader extends PureComponent { static propTypes = { alt: PropTypes.string, @@ -43,7 +43,7 @@ export default class ImageLoader extends React.PureComponent { this.loadImage(this.props); } - componentWillReceiveProps (nextProps) { + UNSAFE_componentWillReceiveProps (nextProps) { if (this.props.src !== nextProps.src) { this.loadImage(nextProps); } @@ -139,14 +139,18 @@ 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' - ref={this.setCanvasRef} - width={width} - height={height} - /> + <> + <div className='loading-bar__container' style={{ width: this.state.width || width }}> + <LoadingBar className='loading-bar' loading={1} /> + </div> + <canvas + className='image-loader__preview-canvas' + ref={this.setCanvasRef} + width={width} + height={height} + /> + </> ) : ( <ZoomableImage alt={alt} |