From f18a15e142df0d12d3581cc889f306265d7f3ea1 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Mon, 8 Mar 2021 14:32:35 +0000
Subject: [PATCH] Animate ListBlock / StreamBlock insertion controls on
 insert/delete

This reduces the jumpiness on insertion and deletion. For nested sequences, it's not possible to eliminate the jump entirely without editing the CSS, because the insert button is `display: inline-block` which gives it a minimum height of the containing block's line-height - as a result, this spacing appears immediately as soon as the block changes from display:none to visible.
---
 .../StreamField/blocks/BaseSequenceBlock.js           | 11 ++++++++---
 client/src/components/StreamField/blocks/ListBlock.js |  5 +++++
 .../src/components/StreamField/blocks/StreamBlock.js  |  4 ++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/src/components/StreamField/blocks/BaseSequenceBlock.js b/client/src/components/StreamField/blocks/BaseSequenceBlock.js
index 1da984b884..1615e302e6 100644
--- a/client/src/components/StreamField/blocks/BaseSequenceBlock.js
+++ b/client/src/components/StreamField/blocks/BaseSequenceBlock.js
@@ -156,8 +156,12 @@ export class BaseInsertionControl {
     this.index = newIndex;
   }
 
-  delete() {
-    $(this.element).hide().attr('aria-hidden', 'true');
+  delete({ animate = false }) {
+    if (animate) {
+      $(this.element).slideUp().attr('aria-hidden', 'true');
+    } else {
+      $(this.element).hide().attr('aria-hidden', 'true');
+    }
   }
 }
 
@@ -252,6 +256,7 @@ export class BaseSequenceBlock {
           this._onRequestInsert(newIndex, inserterOpts);
         },
         strings: this.blockDef.meta.strings,
+        animate,
       }
     );
     this.inserters.splice(index + 1, 0, inserter);
@@ -281,7 +286,7 @@ export class BaseSequenceBlock {
   deleteBlock(index, opts) {
     const animate = opts && opts.animate;
     this.children[index].markDeleted({ animate });
-    this.inserters[index].delete();
+    this.inserters[index].delete({ animate });
     this.children.splice(index, 1);
     this.inserters.splice(index, 1);
 
diff --git a/client/src/components/StreamField/blocks/ListBlock.js b/client/src/components/StreamField/blocks/ListBlock.js
index 5bea48a1bf..5f83684702 100644
--- a/client/src/components/StreamField/blocks/ListBlock.js
+++ b/client/src/components/StreamField/blocks/ListBlock.js
@@ -33,6 +33,7 @@ class InsertPosition extends BaseInsertionControl {
   constructor(placeholder, opts) {
     super(placeholder, opts);
     this.onRequestInsert = opts && opts.onRequestInsert;
+    const animate = opts && opts.animate;
 
     const button = $(`
       <button type="button" title="${h(opts.strings.ADD)}" data-streamfield-list-add
@@ -48,6 +49,10 @@ class InsertPosition extends BaseInsertionControl {
         this.onRequestInsert(this.index);
       }
     });
+
+    if (animate) {
+      button.hide().slideDown();
+    }
   }
 }
 
diff --git a/client/src/components/StreamField/blocks/StreamBlock.js b/client/src/components/StreamField/blocks/StreamBlock.js
index e0243d7042..3de23e4810 100644
--- a/client/src/components/StreamField/blocks/StreamBlock.js
+++ b/client/src/components/StreamField/blocks/StreamBlock.js
@@ -38,6 +38,7 @@ class StreamBlockMenu extends BaseInsertionControl {
   constructor(placeholder, opts) {
     super(placeholder, opts);
     this.groupedChildBlockDefs = opts.groupedChildBlockDefs;
+    const animate = opts.animate;
 
     const dom = $(`
       <div>
@@ -65,6 +66,9 @@ class StreamBlockMenu extends BaseInsertionControl {
     this.canAddBlock = true;
     this.disabledBlockTypes = new Set();
     this.close({ animate: false });
+    if (animate) {
+      dom.hide().slideDown();
+    }
   }
 
   renderMenu() {