diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 3234ecd5b7..bd0e12417b 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -47,6 +47,7 @@ const App = () => {
       try {
         await remixClient.loaded()
         remixClient.onFileChange((name) => {
+          !name.endsWith('.vy') && remixClient.changeStatus({ key: 'none' })
           setOutput({})
           setContract(name)
         })
@@ -161,7 +162,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} output={output} />
+          <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} resetCompilerState={resetCompilerResultState} output={output} remixClient={remixClient}/>
         </div>
 
         <article id="result" className="p-2 mx-3 border-top mt-2">
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index f60745300e..b6fc4f2e64 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useEffect, useState } from 'react'
-import {isVyper, compile, toStandardOutput, isCompilationError, remixClient, normalizeContractPath, compileContract} from '../utils'
+import {isVyper, compile, toStandardOutput, isCompilationError, remixClient, normalizeContractPath, compileContract, RemixClient} from '../utils'
 import Button from 'react-bootstrap/Button'
 
 interface Props {
@@ -8,9 +8,10 @@ interface Props {
   output?: any
   setOutput: (name: string, output: any) => void
   resetCompilerState: () => void
+  remixClient: RemixClient
 }
 
-function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState, output}: Props) {
+function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState, output, remixClient}: Props) {
   const [loadingSpinner, setLoadingSpinnerState] = useState(false)
 
   if (!contract || !contract) {
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 47e94e1696..beab5c8661 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -263,8 +263,9 @@ export function toStandardOutput(fileName: string, compilationResult: any): any
 }
 
 
-export async function compileContract(contract: string, compilerUrl: string, setOutput?: any, setLoadingSpinnerState?: React.Dispatch<React.SetStateAction<boolean>>) {
+export async function compileContract(contract: string, compilerUrl: string, setOutput?: any, setLoadingSpinnerState?: React.Dispatch<React.SetStateAction<boolean>>, spinner?: boolean) {
   remixClient.eventEmitter.emit('resetCompilerState', {})
+  spinner && spinner === true ? setLoadingSpinnerState && setLoadingSpinnerState(true) : null
 
   try {
     // await remixClient.discardHighlight()
@@ -276,6 +277,7 @@ export async function compileContract(contract: string, compilerUrl: string, set
         status: 'failed',
         message: e.message
       }
+
       remixClient.eventEmitter.emit('setOutput', errorGettingContract)
       return
     }
@@ -293,8 +295,9 @@ 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})
+
+      setLoadingSpinnerState && setLoadingSpinnerState(false)
+      remixClient.eventEmitter.emit('setOutput', {status: 'failed', message: output.message, title: 'Error compiling...', line: output.line, column: output.column, key: 1 })
       output = null
       return
     }
@@ -306,7 +309,8 @@ export async function compileContract(contract: string, compilerUrl: string, set
       type: 'success',
       title: 'success'
     })
-    setLoadingSpinnerState(false)
+
+    setLoadingSpinnerState && setLoadingSpinnerState(false)
     const data = toStandardOutput(_contract.name, output)
     remixClient.compilationFinish(_contract.name, _contract.content, data)
     const contractName = _contract['name']
@@ -320,9 +324,10 @@ export async function compileContract(contract: string, compilerUrl: string, set
     remixClient.changeStatus({
       key: 'failed',
       type: 'error',
-      title: err.message
+      title: `1 error occured ${err.message}`
     })
-    // setLoadingSpinnerState(false)
+
+    setLoadingSpinnerState && setLoadingSpinnerState(false)
     remixClient.eventEmitter.emit('setOutput', {status: 'failed', message: err.message})
   }
 }