Add state and logic for spinner.

apps/vyper/src/app/app.tsx

@@ -161,7 +161,7 @@ const App = () => {
           in the .vy file.
         </span>
         <div className="px-3 w-100 mb-3 mt-1" id="compile-btn">
-          <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} resetCompilerState={resetCompilerResultState} />
+          <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} resetCompilerState={resetCompilerResultState} output={output} />
         </div>
 
         <article id="result" className="p-2 mx-3 border-top mt-2">

apps/vyper/src/app/components/CompilerButton.tsx

@@ -1,16 +1,18 @@
-import React, { Fragment, useState } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 import {isVyper, compile, toStandardOutput, isCompilationError, remixClient, normalizeContractPath, compileContract} from '../utils'
 import Button from 'react-bootstrap/Button'
 
 interface Props {
   compilerUrl: string
   contract?: string
+  output?: any
   setOutput: (name: string, output: any) => void
   resetCompilerState: () => void
 }
 
-function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}: Props) {
+function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState, output}: Props) {
   const [loadingSpinner, setLoadingSpinnerState] = useState(false)
+
   if (!contract || !contract) {
     return <Button disabled className="w-100">No contract selected</Button>
   }
@@ -19,17 +21,29 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
     return <Button disabled className="w-100">Not a vyper contract</Button>
   }
 
+  // useEffect(() => {
+  //   const checkCompileOutput = () => {
+  //     if (output && Object.keys(output).length > 0) {
+  //       setLoadingSpinnerState(false)
+  //     }
+  //   }
+  //   checkCompileOutput()
+  // }, [])
+
   /** Compile a Contract */
 
   return (
     <Fragment>
       <button data-id="compile"
-        onClick={() => compileContract(contract, compilerUrl, setOutput)}
+        onClick={async () => {
+          setLoadingSpinnerState(true)
+          await compileContract(contract, compilerUrl, setOutput, setLoadingSpinnerState)
+        }}
         title={contract}
         className="btn btn-primary w-100 d-block btn-block text-break remixui_disabled mb-1 mt-3"
       >
         <div className="d-flex align-items-center justify-content-center fa-1x">
-          {/* <span className="fas fa-sync fa-pulse mr-1" /> */}
+          <span className={ loadingSpinner ? 'fas fa-sync fa-pulse mr-1' : 'fas fa-sync mr-1'} />
           <div className="text-truncate overflow-hidden text-nowrap">
             <span>Compile</span>
             <span className="ml-1 text-nowrap">{contract}</span>

apps/vyper/src/app/utils/compiler.tsx

@@ -263,7 +263,7 @@ export function toStandardOutput(fileName: string, compilationResult: any): any
 }
 
 
-export async function compileContract(contract: string, compilerUrl: string, setOutput?: any) {
+export async function compileContract(contract: string, compilerUrl: string, setOutput?: any, setLoadingSpinnerState?: React.Dispatch<React.SetStateAction<boolean>>) {
   remixClient.eventEmitter.emit('resetCompilerState', {})
 
   try {
@@ -293,6 +293,7 @@ export async function compileContract(contract: string, compilerUrl: string, set
         type: 'error',
         title: 'Compilation failed...'
       })
+      setLoadingSpinnerState(false)
       remixClient.eventEmitter.emit('setOutput', {status: 'failed', message: output.message, title: 'Error compiling...', line: output.line, column: output.column})
       output = null
       return
@@ -305,7 +306,7 @@ export async function compileContract(contract: string, compilerUrl: string, set
       type: 'success',
       title: 'success'
     })
-
+    setLoadingSpinnerState(false)
     const data = toStandardOutput(_contract.name, output)
     remixClient.compilationFinish(_contract.name, _contract.content, data)
     const contractName = _contract['name']
@@ -321,6 +322,7 @@ export async function compileContract(contract: string, compilerUrl: string, set
       type: 'error',
       title: err.message
     })
+    setLoadingSpinnerState(false)
     remixClient.eventEmitter.emit('setOutput', {status: 'failed', message: err.message})
   }
 }