feat: loading spinner

License: MIT
Signed-off-by: Alan Shaw <[email protected]>

Author: Alan Shaw

package-lock.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "cytoscape": "^3.6.0",
     "cytoscape-dagre": "^2.2.2",
-    "ipfs": "^0.36.0",
+    "ipfs": "github:ipfs/js-ipfs#fix/file-support",
     "ipfs-css": "^0.12.0",
     "ipld-dag-pb": "^0.17.0",
     "parcel": "^1.12.3",

package.json

@@ -1,12 +1,12 @@
 /* eslint-env browser */
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, Fragment } from 'react'
 import Header from './Header'
 import Controls from './Controls'
 import Dag from './Dag'
-import { Buffer } from 'ipfs'
 import { ipfsAdd } from './lib/ipfs'
 import DropTarget from './DropTarget'
 import NodeInfo from './NodeInfo'
+import Spinner from './Spinner'
 
 export default function App () {
   const [files, setFiles] = useState([])
@@ -17,19 +17,21 @@ export default function App () {
   const [layerRepeat, setLayerRepeat] = useState(4)
   const [rootCid, setRootCid] = useState(null)
   const [focusedNode, setFocusedNode] = useState(null)
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     if (!files.length) return
-    ipfsAdd({ files, chunker, rawLeaves, strategy, maxChildren, layerRepeat })
-      .then(setRootCid)
+    const addFiles = async () => {
+      setRootCid(null)
+      setLoading(true)
+      const cid = await ipfsAdd({ files, chunker, rawLeaves, strategy, maxChildren, layerRepeat })
+      setRootCid(cid)
+    }
+    addFiles()
   }, [files, chunker, rawLeaves, strategy, maxChildren, layerRepeat])
 
   const onFileChange = file => {
-    const fileReader = new FileReader()
-    fileReader.onload = e => {
-      setFiles(files.concat({ path: file.name, content: Buffer.from(e.target.result) }))
-    }
-    fileReader.readAsArrayBuffer(file)
+    setFiles(files.concat({ path: file.name, content: file }))
   }
 
   const onReset = () => {
@@ -65,8 +67,12 @@ export default function App () {
         <DropTarget onFileDrop={onFileChange} className='h-100'>
           {files.length ? (
             <div className='flex flex-column h-100'>
-              <div className='flex-auto'>
-                <Dag rootCid={rootCid} onNodeFocus={setFocusedNode} />
+              <div className='flex-auto relative'>
+                <Spinner show={loading} />
+                <Dag
+                  rootCid={rootCid}
+                  onNodeFocus={setFocusedNode}
+                  onGraphRender={() => setLoading(false)} />
               </div>
               <div className='flex-none'>
                 <NodeInfo info={focusedNode} />

src/App.js

@@ -27,6 +27,7 @@ export default class Dag extends Component {
 
   async _updateGraph () {
     if (this._graph) this._graph.destroy()
+    if (this.props.onNodeFocus) this.props.onNodeFocus(null)
 
     const { rootCid } = this.props
     if (!rootCid) return
@@ -54,9 +55,8 @@ export default class Dag extends Component {
 
     cy.layout(DagGraphOptions.layout).run()
 
-    if (this.props.onNodeFocus) {
-      focusElement(cy.getElementById(rootCid))
-    }
+    if (this.props.onNodeFocus) focusElement(cy.getElementById(rootCid))
+    if (this.props.onGraphRender) this.props.onGraphRender()
   }
 
   async _getGraphNodes (cid, nodeMap = new Map()) {

src/Dag.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react'
 
 const NodeContainer = ({ children }) => (
-  <div className='pa3' style={{ minHeight: 60 }}>{children}</div>
+  <div className='pa3' style={{ minHeight: 90 }}>{children}</div>
 )
 
 const CidColumn = ({ cid }) => (

src/NodeInfo.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function Spinner ({ show }) {
+  return (
+    <div className='w-100 h-100 absolute' style={{ display: show ? 'block' : 'none', zIndex: 1 }}>
+      <div className='h-100 flex items-center justify-center'>
+        <div className='lolo' />
+      </div>
+    </div>
+  )
+}

src/Spinner.js

@@ -1,2 +1,27 @@
 @import tachyons;
 @import ipfs-css;
+
+@keyframes lolo {
+  0%, 100% {
+    transform: translateX(30px) scaleX(0.14);
+  }
+  25%, 75% {
+    transform: scaleX(1);
+  }
+  50% {
+    transform: translateX(-30px) scaleX(0.14);
+  }
+}
+.lolo {
+  display: inline-block;
+  width: 70px;
+  height: 6px;
+}
+.lolo::after {
+  content:'';
+  display:block;
+  background: #0b3a53;
+  width: 70px;
+  height: 100%;
+  animation: lolo 1.5s cubic-bezier(0.25,0.1,0.25,1) infinite;
+}

src/index.css

@@ -18,9 +18,6 @@ export async function ipfsAdd ({ files, chunker, rawLeaves, strategy, maxChildre
 
   console.log('adding', { files, chunker, strategy, maxChildren, layerRepeat })
 
-  // ...because IPFS mutates the array and it's contents
-  files = files.map(({ path, content }) => ({ path, content }))
-
   const res = await ipfs.add(files, {
     chunker,
     rawLeaves,