add loading animation

src/components/LineLoader.jsx

@@ -0,0 +1,51 @@
+import styled, { keyframes } from 'styled-components'
+
+const BarWidthAnimation = keyframes`
+  0% {
+    width: 40%;
+  }
+  100% {
+    width: 25%;
+  }
+`
+
+const BarPositionAnimation = keyframes`
+  0% {
+    left: -50%;
+  }
+  100% {
+    left: 100%;
+  }
+`
+
+const LoaderContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(255,255,255,.1);
+  overflow: hidden;
+
+  ::before, ::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    background-color: var(--primary-color);
+  }
+
+  ::after {
+    background-color: var(--secondary-color);
+    animation: ${BarWidthAnimation} 8s, ${BarPositionAnimation} 3s;
+  }
+`
+
+const LineLoader = props => {
+  return <LoaderContainer />
+}
+
+export default LineLoader

src/components/fileBrowser.jsx

@@ -38,12 +38,14 @@ import CaretDown from '../assets/icons/caretDown.svg'
 import bytesToString from '../utils/bytestring.js'
 import { Button } from '../styled.js'
 import assert from 'assert'
+import LineLoader from './LineLoader.jsx'
 
 const FBContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
+  position: relative;
 `
 
 // bunch of styled components
@@ -331,7 +333,6 @@ class FileBrowser extends Component {
     currentPath.shift()
 
     if (index !== currentPath.length - 1) {
-      console.log("changing path", index, currentPath.length)
 
       currentPath.length = index + 1
       this.props.updateFiles(currentPath.join("/"))
@@ -386,8 +387,6 @@ class FileBrowser extends Component {
    * always show folders on top
    */
   renderFiles = (isNew) => {
-    // console.log(this.state.files)
-
     let files = [{}]
     if (isNew)  files = this.props.files
     else        files = this.state.files
@@ -434,6 +433,9 @@ class FileBrowser extends Component {
         {
           this.renderMenu()
         }
+        {
+          this.props.loading?<LineLoader/>:""
+        }
         <BrowserHeader>
           <div style={{
             // gridColumn: "1 / span 2",