feat: CAR Upload loader (#318)

Co-authored-by: Marcin Rataj <lidel@lidel.org>

src/bundles/explore.js

@@ -105,12 +105,16 @@ const makeBundle = () => {
     store.doUpdateHash(hash)
   }
 
-  bundle.doUploadUserProvidedCar = (file) => (args) => {
+  bundle.doUploadUserProvidedCar = (file, uploadImage) => (args) => {
     const { store, getIpfs } = args
     importCar(file, getIpfs()).then(result => {
       const cid = result.root.cid
       const hash = cid.toString() ? `#/explore${ensureLeadingSlash(cid.toString())}` : '#/explore'
       store.doUpdateHash(hash)
+
+      //  Grab the car loader image so we can change it's state
+      const imageFileLoader = document.getElementById('car-loader-image')
+      imageFileLoader.src = uploadImage
     })
   }
   return bundle

src/components/explore/IpldCarExploreForm.js

@@ -8,7 +8,6 @@ class IpldCarExploreForm extends React.Component {
     this.state = {
       file: { }
     }
-
     this.handleOnChange = this.handleOnChange.bind(this)
     this.handleOnSubmit = this.handleOnSubmit.bind(this)
   }
@@ -18,9 +17,16 @@ class IpldCarExploreForm extends React.Component {
   }
 
   handleOnChange () {
+    var spinnerImage = require('./spinner.svg').default
+    var uploadImage = require('./upload.svg').default
+
+    //  Change the state.
+    const imageFileLoader = document.getElementById('car-loader-image')
+    imageFileLoader.src = spinnerImage
+
+    //  Get the file, upload car.
     const selectedFile = document.getElementById('car-file').files[0]
-    this.setState({ file: selectedFile })
-    this.props.doUploadUserProvidedCar(selectedFile)
+    this.props.doUploadUserProvidedCar(selectedFile, uploadImage)
   }
 
   render () {
@@ -31,6 +37,7 @@ class IpldCarExploreForm extends React.Component {
           <div className='relative'>
             <input id='car-file' type='file' accept='.car' className='input-reset bn pa2 mb2 db w-100 f6 br-0 placeholder-light focus-outline' style={{ borderRadius: '3px 0 0 3px', backgroundColor: 'white', padding: '5px 0px 5px 5px', width: '99%' }} aria-describedby='name-desc' onChange={this.handleOnChange} />
             <small id='car-file-desc' className='o-0 absolute f6 black-60 db mb2'>{t('IpldCarExploreForm.uploadCarFile')}</small>
+            <img id='car-loader-image' alt='placeholder for upload and loader' src={require('./upload.svg').default} className='absolute' style={{ top: '0px', right: '0px', height: '30px', width: '30px', paddingRight: '10px' }} />
           </div>
         </div>
       </form>

src/components/explore/IpldExploreForm.js

@@ -39,8 +39,8 @@ class IpldExploreForm extends React.Component {
             className='button-reset dib lh-copy pv1 pl2 pr3 ba f7 fw4 focus-outline white bg-aqua bn'
             style={{ borderRadius: '0 3px 3px 0' }}
           >
-            <StrokeIpld style={{ height: 24 }} className='dib fill-current-color v-mid' />
-            <span className='ml2'>{t('IpldExploreForm.explore')}</span>
+            <StrokeIpld style={{ height: 24 }} className='dib fill-current-color v-mid navy 0-100' />
+            <span className='ml2 navy 0-100'>{t('IpldExploreForm.explore')}</span>
           </button>
         </div>
       </form>