Create loader

web/src/pages/PrepareTransactionsPage/ImportBar.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useState } from "react";
 import type { ImportOptions } from "../../types/api";
+import classNames from "classnames";
 
 export type ImportBarProps = {
   onSubmit: (opts: ImportOptions) => void;
+  loading: boolean;
 };
 
-export default function ImportBar({ onSubmit }: ImportBarProps) {
+export default function ImportBar({ onSubmit, loading }: ImportBarProps) {
   const [formData, setFormData] = useState<ImportOptions>({ mode: 'import' });
 
   
@@ -34,12 +36,12 @@ export default function ImportBar({ onSubmit }: ImportBarProps) {
         <div className="control">
           <div className="buttons has-addons is-left">
             <button 
-              type="button"
-              className={`button ${formData.mode === 'import' ? "is-primary is-selected" : ""}`}
+              type="button"              
+              className={classNames("button", { 'is-primary': formData.mode === 'import', 'is-selected': formData.mode === 'import'})}
               onClick={() => changeMode('import')}>Import</button>
             <button 
               type="button"
-              className={`button ${formData.mode === 'add' ? "is-primary is-selected" : ""}`}
+              className={classNames("button", { 'is-primary': formData.mode === 'add', 'is-selected': formData.mode === 'add'})}
               onClick={() => changeMode('add')}>Add</button>
           </div>
         </div>
@@ -69,7 +71,9 @@ export default function ImportBar({ onSubmit }: ImportBarProps) {
         <div className="control">
           <button 
             type="submit" 
-            className="button is-link is-fullwidth">Submit transactions</button>
+            disabled={loading}
+            className={classNames("button", "is-link", "is-fullwidth", { 'is-loading': loading })}>Submit transactions
+          </button>
         </div>
       </div>
     </form>