diff --git a/src/components/LineLoader.jsx b/src/components/LineLoader.jsx new file mode 100644 index 0000000..99c23d6 --- /dev/null +++ b/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 +} + +export default LineLoader \ No newline at end of file diff --git a/src/components/fileBrowser.jsx b/src/components/fileBrowser.jsx index 6ca403b..7c81c81 100644 --- a/src/components/fileBrowser.jsx +++ b/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?:"" + }