From 58141b5183682a4ccdf66663d4f07a7e1f32fb27 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 31 Mar 2023 10:17:18 +0100
Subject: [PATCH] Improve animations for adding rows and handle add row failure

---
 .../src/components/sheet/layout/NewRow.svelte | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/frontend-core/src/components/sheet/layout/NewRow.svelte b/packages/frontend-core/src/components/sheet/layout/NewRow.svelte
index 7166c6bd91..124786fcd2 100644
--- a/packages/frontend-core/src/components/sheet/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/NewRow.svelte
@@ -36,8 +36,8 @@
     const savedRow = await rows.actions.addRow(newRow)
     if (savedRow && firstColumn) {
       $selectedCellId = `${newRow._id}-${firstColumn.name}`
+      isAdding = false
     }
-    isAdding = false
   }
 
   const cancel = () => {
@@ -62,11 +62,13 @@
 
 <!-- Only show new row functionality if we have any columns -->
 {#if firstColumn}
-  {#if !isAdding}
-    <div class="add-button" class:above-scrollbar={$showHScrollbar}>
-      <Button size="M" cta icon="Add" on:click={startAdding}>Add row</Button>
-    </div>
-  {/if}
+  <div
+    class="add-button"
+    class:visible={!isAdding}
+    class:above-scrollbar={$showHScrollbar}
+  >
+    <Button size="M" cta icon="Add" on:click={startAdding}>Add row</Button>
+  </div>
 
   <div
     class="container"
@@ -148,12 +150,16 @@
   .add-button {
     position: absolute;
     left: 16px;
-    bottom: 16px;
     z-index: 1;
+    transform: translateY(calc(16px + 100%));
+    transition: transform 130ms ease-out;
   }
   .add-button.above-scrollbar {
     bottom: 32px;
   }
+  .add-button.visible {
+    transform: translateY(0);
+  }
 
   .container {
     pointer-events: none;