about summary refs log tree commit diff
path: root/app/javascript/flavours
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-05-20 21:38:12 +0200
committerThibG <thib@sitedethib.com>2018-07-24 21:20:18 +0200
commit02326a432239c58a6cb9ae18486826827b35a190 (patch)
tree6611a2591b37693bed6b7e3b78c8e1429641899d /app/javascript/flavours
parent1769a7e9aa45731bf4673faee59d1ca7ce11773c (diff)
[Glitch] Use LoadingBar instead of blur to indicate that an image is loading
Port 955d5d36e80259d8c10a0246d359f35f63de059d to the glitch-soc flavour
Diffstat (limited to 'app/javascript/flavours')
-rw-r--r--app/javascript/flavours/glitch/features/ui/components/image_loader.js4
-rw-r--r--app/javascript/flavours/glitch/styles/components/index.scss5
2 files changed, 7 insertions, 2 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 c7360a726..5e1cf75af 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 (
       <div className={className}>
+        <LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} />
         {loading ? (
           <canvas
             className='image-loader__preview-canvas'
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 487bb7ffb..578cdbc9f 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -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 {