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 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/flavours/glitch/styles/components/index.scss
View File

@ -339,6 +339,7 @@
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;
@ -347,8 +348,8 @@
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 {