adding nice loading states

packages/builder/src/components/database/DataTable/ModelDataTable.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
   import fsort from "fast-sort"
   import getOr from "lodash/fp/getOr"
   import { store, backendUiStore } from "builderStore"
@@ -8,6 +9,7 @@
   import LinkedRecord from "./LinkedRecord.svelte"
   import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
+  import Spinner from "components/common/Spinner.svelte"
   import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
   import RowPopover from "./popovers/Row.svelte"
   import ColumnPopover from "./popovers/Column.svelte"
@@ -26,14 +28,17 @@
   let headers = []
   let currentPage = 0
   let search
+  let loading
 
   $: {
     if (
       $backendUiStore.selectedView &&
       $backendUiStore.selectedView.name.startsWith("all_")
     ) {
+      loading = true
       api.fetchDataForView($backendUiStore.selectedView).then(records => {
         data = records || []
+        loading = false
       })
     }
   }
@@ -60,7 +65,14 @@
 
 <section>
   <div class="table-controls">
-    <h2 class="title">{$backendUiStore.selectedModel.name}</h2>
+    <h2 class="title">
+      <span>{$backendUiStore.selectedModel.name}</span>
+      {#if loading}
+        <div transition:fade>
+          <Spinner size="15" />
+        </div>
+      {/if}
+    </h2>
     <div class="popovers">
       <ColumnPopover />
       {#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
@@ -123,6 +135,12 @@
     font-weight: 600;
     text-rendering: optimizeLegibility;
     text-transform: capitalize;
+    display: flex;
+    align-items: center;
+  }
+
+  .title > span {
+    margin-right: var(--spacing-xs);
   }
 
   table {

packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte

@@ -2,6 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
+  import Spinner from "components/common/Spinner.svelte"
   import {
     Body,
     DropdownMenu,
@@ -20,8 +21,10 @@
   let dropdown
   let name
   let dataImport
+  let loading
 
   async function saveTable() {
+    loading = true
     const model = await backendUiStore.actions.models.save({
       name,
       schema: dataImport.schema || {},
@@ -32,6 +35,7 @@
     name = ""
     dropdown.hide()
     analytics.captureEvent("Table Created", { name })
+    loading = false
   }
 
   const onClosed = () => {
@@ -65,7 +69,10 @@
         disabled={!name || !dataImport.valid}
         primary
         on:click={saveTable}>
-        Save
+        <span>Save</span>
+        {#if loading}
+          <Spinner size="10" />
+        {/if}
       </Button>
     </div>
   </footer>
@@ -73,10 +80,15 @@
 
 <style>
   h5 {
-    margin-bottom: var(--spacing-l);
+    margin-bottom: var(--spacing-m);
+    margin-top: 0;
     font-weight: 500;
   }
 
+  span {
+    margin-right: 5px;
+  }
+
   .container {
     padding: var(--spacing-l);
     margin: 0;

packages/builder/src/components/nav/ModelNavigator/TableDataImport.svelte

@@ -22,7 +22,7 @@
   $: dataImport = {
     valid,
     schema: buildModelSchema(schema),
-    path: files.length && files[0].path,
+    path: files[0] && files[0].path,
   }
 
   function buildModelSchema(schema) {
@@ -89,7 +89,7 @@
 
 <div class="dropzone">
   <input id="file-upload" accept=".csv" type="file" on:change={handleFile} />
-  <label for="file-upload">
+  <label for="file-upload" class:uploaded={files[0]}>
     {#if files[0]}{files[0].name}{:else}Upload{/if}
   </label>
 </div>
@@ -129,11 +129,17 @@
   }
 
   .field-status {
-    color: green;
+    color: var(--green);
+    justify-self: center;
+    font-weight: 500;
   }
 
   .error {
-    color: red;
+    color: var(--red);
+  }
+
+  .uploaded {
+    color: var(--blue);
   }
 
   input[type="file"] {
@@ -169,6 +175,7 @@
     font-size: 1.2em;
     color: var(--grey-7);
     cursor: pointer;
+    justify-self: flex-end;
   }
 
   .field {

packages/server/src/api/routes/record.js

@@ -1,11 +1,7 @@
 const Router = require("@koa/router")
 const recordController = require("../controllers/record")
 const authorized = require("../../middleware/authorized")
-const {
+const { READ_MODEL, WRITE_MODEL } = require("../../utilities/accessLevels")
-  READ_MODEL,
-  WRITE_MODEL,
-  BUILDER,
-} = require("../../utilities/accessLevels")
 
 const router = Router()
 

packages/server/src/utilities/csvParser.js

@@ -42,7 +42,8 @@ function parse(path, parsers) {
         const validator = VALIDATORS[parsers[key].type]
 
         try {
-          schema[key].success = !!validator(row[key])
+          // allow null/undefined values
+          schema[key].success = !row[key] || !!validator(row[key])
         } catch (err) {
           schema[key].success = false
         }