treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Use LoadingBar instead of blur to indicate that an image is loading 

Port 955d5d36e8 to the glitch-soc flavour
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2018-05-20 21:38:12 +02:00 committed by ThibG
parent 1769a7e9aa
commit 02326a4322
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/flavours/glitch/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'

5
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -339,6 +339,7 @@
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.image-loader__preview-canvas {
max-width: $media-modal-media-max-width;
@ -347,8 +348,8 @@
object-fit: contain;
}
&.image-loader--loading .image-loader__preview-canvas {
filter: blur(2px);
.loading-bar {
position: relative;
}
&.image-loader--amorphous .image-loader__preview-canvas {