feat: add loading animation for files resp

src/components/loading-animation/LoadingAnimation.css

@@ -0,0 +1,33 @@
+
+.LoadingAnimation {
+  position: relative;
+  overflow: hidden;
+  opacity: 0.4;
+  background-color: #f0f6fa;
+}
+
+.LoadingAnimationSwipe::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 25%,
+  white 70%,
+    transparent 75%
+  );
+  animation: LoadingAnimationSwipe 1.6s ease-in-out infinite;
+}
+
+@keyframes LoadingAnimationSwipe {
+  0% {
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}

src/components/loading-animation/LoadingAnimation.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import './LoadingAnimation.css'
+
+const LoadingAnimation = ({ loading, children }) => {
+  if (!loading) return children
+
+  return (
+    <div className='LoadingAnimation'>
+      <div className='LoadingAnimationSwipe'>
+        { children }
+      </div>
+    </div>
+  )
+}
+
+export default LoadingAnimation

src/files/files-list/FilesList.js

@@ -1,17 +1,19 @@
 /* global getComputedStyle */
-
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { connect } from 'redux-bundler-react'
 import PropTypes from 'prop-types'
+import { connect } from 'redux-bundler-react'
+import { Trans, translate } from 'react-i18next'
+import { join } from 'path'
+import { sorts } from '../../bundles/files'
+// Reac DnD
+import { NativeTypes } from 'react-dnd-html5-backend'
+import { DropTarget } from 'react-dnd'
+// Components
 import Checkbox from '../../components/checkbox/Checkbox'
 import SelectedActions from '../selected-actions/SelectedActions'
 import File from '../file/File'
-import { NativeTypes } from 'react-dnd-html5-backend'
-import { DropTarget } from 'react-dnd'
-import { join } from 'path'
-import { sorts } from '../../bundles/files'
-import { Trans, translate } from 'react-i18next'
+import LoadingAnimation from '../../components/loading-animation/LoadingAnimation'
 
 export class FilesList extends React.Component {
   static propTypes = {
@@ -281,7 +283,7 @@ export class FilesList extends React.Component {
   }
 
   render () {
-    let { t, files, className, upperDir, connectDropTarget, isOver, canDrop } = this.props
+    let { t, files, className, upperDir, connectDropTarget, isOver, canDrop, filesIsFetching } = this.props
     const { selected, isDragging } = this.state
     const allSelected = selected.length !== 0 && selected.length === files.length
 
@@ -305,22 +307,24 @@ export class FilesList extends React.Component {
           </div>
           <div className='pa2' style={{ width: '2.5rem' }} />
         </header>
-        { upperDir &&
-          <File
-            ref={r => { this.filesRefs['..'] = r }}
-            onNavigate={() => this.props.onNavigate(upperDir.path)}
-            onInspect={() => this.props.onInspect([upperDir])}
-            onAddFiles={this.props.onAddFiles}
-            onMove={this.move}
-            setIsDragging={this.isDragging}
-            translucent={isDragging || (isOver && canDrop)}
-            name='..'
-            focused={this.state.focused === '..'}
-            cantDrag
-            cantSelect
-            {...upperDir} />
-        }
-        {this.files}
+        <LoadingAnimation loading={filesIsFetching}>
+          { upperDir &&
+            <File
+              ref={r => { this.filesRefs['..'] = r }}
+              onNavigate={() => this.props.onNavigate(upperDir.path)}
+              onInspect={() => this.props.onInspect([upperDir])}
+              onAddFiles={this.props.onAddFiles}
+              onMove={this.move}
+              setIsDragging={this.isDragging}
+              translucent={isDragging || (isOver && canDrop)}
+              name='..'
+              focused={this.state.focused === '..'}
+              cantDrag
+              cantSelect
+              {...upperDir} />
+          }
+          {this.files}
+        </LoadingAnimation>
         {this.selectedMenu}
       </section>
     )
@@ -349,5 +353,6 @@ export const FilesListWithDropTarget = DropTarget(NativeTypes.FILE, dropTarget,
 
 export default connect(
   'selectNavbarWidth',
+  'selectFilesIsFetching',
   FilesListWithDropTarget
 )