Fix the rest of the nasty flashing when working with importing CSVs

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -53,6 +53,15 @@
   $: displayColumnOptions = Object.keys(schema || {}).filter(column => {
     return validation[column]
   })
+  $: {
+    // binding in consumer is causing double renders here
+    const newValidateHash = JSON.stringify(rows) + JSON.stringify(schema)
+    if (newValidateHash !== validateHash) {
+      validate(rows, schema)
+    }
+    validateHash = newValidateHash
+  }
+  $: openFileUpload(promptUpload, fileInput)
 
   async function handleFile(e) {
     loading = true
@@ -73,7 +82,6 @@
 
   async function validate(rows, schema) {
     loading = true
-
     try {
       if (rows.length > 0) {
         const response = await API.validateNewTableImport({ rows, schema })
@@ -88,21 +96,9 @@
       allValid = false
       errors = {}
     }
-
     loading = false
   }
 
-  $: {
-    // binding in consumer is causing double renders here
-    const newValidateHash = JSON.stringify(rows) + JSON.stringify(schema)
-
-    if (newValidateHash !== validateHash) {
-      validate(rows, schema)
-    }
-
-    validateHash = newValidateHash
-  }
-
   const handleChange = (name, e) => {
     schema[name].type = e.detail
     schema[name].constraints = FIELDS[e.detail.toUpperCase()].constraints
@@ -114,7 +110,13 @@
     }
   }
 
-  $: openFileUpload(promptUpload, fileInput)
+  const deleteColumn = name => {
+    if (loading) {
+      return
+    }
+    delete schema[name]
+    schema = schema
+  }
 </script>
 
 <div class="dropzone">
@@ -127,10 +129,8 @@
     on:change={handleFile}
   />
   <label for="file-upload" class:uploaded={rows.length > 0}>
-    {#if loading}
+    {#if error}
-      loading...
+      Error: {error}
-    {:else if error}
-      error: {error}
     {:else if fileName}
       {fileName}
     {:else}
@@ -150,7 +150,6 @@
           placeholder={null}
           getOptionLabel={option => option.label}
           getOptionValue={option => option.value}
-          disabled={loading}
         />
         <span
           class={validation[column.name]
@@ -169,12 +168,8 @@
         <Icon
           size="S"
           name="Close"
-          disabled={loading}
           hoverable
-          on:click={() => {
+          on:click={() => deleteColumn(column.name)}
-            delete schema[column.name]
-            schema = schema
-          }}
         />
       </div>
     {/each}