me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
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 React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { LoadingBar } from 'react-redux-loading-bar';
import ZoomableImage from './zoomable_image'; import ZoomableImage from './zoomable_image';
export default class ImageLoader extends React.PureComponent { export default class ImageLoader extends React.PureComponent {
@ -23,6 +24,7 @@ export default class ImageLoader extends React.PureComponent {
state = { state = {
loading: true, loading: true,
error: false, error: false,
width: null,
} }
removers = []; removers = [];
@ -122,6 +124,7 @@ export default class ImageLoader extends React.PureComponent {
setCanvasRef = c => { setCanvasRef = c => {
this.canvas = c; this.canvas = c;
if (c) this.setState({ width: c.offsetWidth });
} }
render () { render () {
@ -135,6 +138,7 @@ export default class ImageLoader extends React.PureComponent {
return ( return (
<div className={className}> <div className={className}>
<LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} />
{loading ? ( {loading ? (
<canvas <canvas
className='image-loader__preview-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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
.image-loader__preview-canvas { .image-loader__preview-canvas {
max-width: $media-modal-media-max-width; max-width: $media-modal-media-max-width;
@ -1486,8 +1487,8 @@ a.account__display-name {
object-fit: contain; object-fit: contain;
} }
&.image-loader--loading .image-loader__preview-canvas { .loading-bar {
filter: blur(2px); position: relative;
} }
&.image-loader--amorphous .image-loader__preview-canvas { &.image-loader--amorphous .image-loader__preview-canvas {