Create loader

web/src/pages/LoadFilePage/LoadFileForm.tsx

@@ -1,8 +1,10 @@
+import classNames from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 export type LoadFileFormProps = {
   profiles: string[];
   servers: string[];
+  loading: boolean;
   defaultProfile?: string;
   defaultServer?: string;
   onSubmit?: (csvFile: File, profile: string, server: string) => Promise<void>;
@@ -14,7 +16,7 @@ type Form = {
   server?: string;
 };
 
-export default function LoadFileForm({ profiles, servers, defaultProfile, defaultServer, onSubmit }: LoadFileFormProps) {
+export default function LoadFileForm({ profiles, servers, defaultProfile, defaultServer, onSubmit, loading }: LoadFileFormProps) {
   const fileInput = useRef<HTMLInputElement>(null);
   
   const [formData, setFormData] = useState<Form>({});
@@ -42,7 +44,7 @@ export default function LoadFileForm({ profiles, servers, defaultProfile, defaul
     if (!selectedFile || !formData.profile || !formData.server) {
       return;
     }
-
+  
     onSubmit?.(selectedFile, formData.profile, formData.server);    
   }, [formData, formData, selectedFile, onSubmit]);
 
@@ -50,8 +52,8 @@ export default function LoadFileForm({ profiles, servers, defaultProfile, defaul
     <form onSubmit={handleSubmit}>
       <div className="field">
         <label className="label">CSV File</label>
-        <div className="control">
-          <div className={`file is-fullwidth ${!!selectedFile ? "has-name" : ""}`}>       
+        <div className="control">          
+          <div className={classNames("file", "is-fullwidth", { "has-name": selectedFile })}>   
             <label className="file-label">
               <input className="file-input" ref={fileInput} type="file" accept=".csv" onChange={(e) => setFormData({...formData, files: e.target.files ?? undefined})} required />
               <span className="file-cta">                
@@ -95,9 +97,8 @@ export default function LoadFileForm({ profiles, servers, defaultProfile, defaul
         <div className="control">
           <button 
             type="submit" 
-            className="button is-link is-fullwidth"
-          >
-            Load transactions
+            className={classNames("button", "is-link", "is-fullwidth", { 'is-loading': loading })}
+            disabled={loading}>Load transactions
           </button>
         </div>
       </div>