allow animating both the new issue form, and the list below it

disable animations for now

app/assets/javascripts/boards/components/board_list.js

@@ -163,20 +163,21 @@ export default {
     this.$refs.list.removeEventListener('scroll', this.onScroll);
   },
   template: `
-    <div class="board-list-component">
+    <transition-group tag="div" class="board-list-component">
       <div
+        key="loading"
         class="board-list-loading text-center"
         aria-label="Loading issues"
         v-if="loading">
         <loading-icon />
       </div>
-      <transition name="slide-down">
       <board-new-issue
+        key="newIssue"
         :group-id="groupId"
         :list="list"
         v-if="list.type !== 'closed' && showIssueForm"/>
-      </transition>
       <ul
+        key="list"
         class="board-list"
         v-show="!loading"
         ref="list"
@@ -211,6 +212,6 @@ export default {
           </span>
         </li>
       </ul>
-    </div>
+    </transition-group>
   `,
 };

app/assets/javascripts/boards/components/board_new_issue.js

@@ -23,7 +23,6 @@ export default {
       title: '',
       loading: true,
       selectedProject: {},
-      projects: [],
       error: false,
     };
   },
@@ -126,7 +125,8 @@ export default {
     }
   },
   template: `
-    <div class="card board-new-issue-form">
+    <div class="board-new-issue-form">
+      <div class="card">
         <form @submit="submit($event)">
           <div class="flash-container"
             v-if="error">
@@ -169,7 +169,9 @@ export default {
                   <input class="dropdown-input-field">
                 </div>
                 <div class="dropdown-content"></div>
-              <div class="dropdown-loading"></div>
+                <div class="dropdown-loading">
+                  <loading-icon />
+                </div>
               </div>
             </div>
           </template>
@@ -188,5 +190,6 @@ export default {
           </div>
         </form>
       </div>
+    </div>
   `,
 };

app/assets/stylesheets/pages/boards.scss

@@ -262,43 +262,10 @@
   }
 }
 
-.slide-down-enter {
-  transform: translateY(-100%);
-}
-
-.slide-down-enter-active {
-  transition: transform $fade-in-duration;
-
-  + .board-list {
-    transform: translateY(-136px);
-    transition: none;
-  }
-}
-
-.slide-down-enter-to {
-  + .board-list {
-    transform: translateY(0);
-    transition: transform $fade-in-duration ease;
-  }
-}
-
-.slide-down-leave {
-  transform: translateY(0);
-}
-
-.slide-down-leave-active {
-  transition: all $fade-in-duration;
-  transform: translateY(-136px);
-
-  + .board-list {
-    transition: transform $fade-in-duration ease;
-    transform: translateY(-136px);
-  }
-}
-
 .board-list-component {
   height: calc(100% - 49px);
   overflow: hidden;
+  position: relative;
 }
 
 .board-list {