Fix placeholder columns during sorting [SCI-7687]

app/assets/javascripts/experiments/table.js

@@ -130,7 +130,7 @@ var ExperimnetTable = {
       e.preventDefault();
       this.restoreMyModules(e.target.href, e.target.dataset.id);
     });
-    
+
     $(this.table).on('click', '.duplicate-my-module', (e) => {
       e.preventDefault();
       this.duplicateMyModules($('#duplicateTasks').data('url'), e.target.dataset.id);
@@ -498,9 +498,10 @@ var ExperimnetTable = {
       sort: this.myModulesCurrentSort
     };
     var dataUrl = $(this.table).data('my-modules-url');
+    $(this.table).find('.table-row').remove();
     this.loadPlaceholder();
     $.get(dataUrl, tableParams, (result) => {
-      $(this.table).find('.table-row').remove();
+      $(this.table).find('.table-row-placeholder, .table-row-placeholder-divider').remove();
       this.appendRows(result.data);
       this.initDueDatePicker(result.data);
       InfiniteScroll.init(this.table, {

app/assets/stylesheets/experiment/table.scss

@@ -239,12 +239,21 @@
       white-space: nowrap;
     }
 
+    .table-row-placeholder-divider {
+      background: $color-concrete;
+      display: inline-block;
+      grid-column: 1/-1;
+      height: 1px;
+    }
+
     .table-row-placeholder {
       align-items: center;
       background-color: $color-white;
       border-radius: $border-radius-default;
       box-shadow: $flyout-shadow;
-      display: contents;
+      display: grid;
+      grid-column: 1 / -1;
+      grid-template-columns: 32px repeat(9, minmax(max-content, auto));
 
       .placeholder-cell {
         animation-duration: 2s;
@@ -252,63 +261,14 @@
         animation-name: placeholder-pulsing;
         background-color: $color-alto;
         border-radius: $border-radius-default;
+        display: block;
         height: 18px;
         margin: auto;
-
-        &.line-0 {
-          display: block;
-          grid-column: 2;
-          width: 90%;
-        }
-
-        &.line-1 {
-          display: block;
-          grid-column: 3;
-          width: 90%;
-        }
-
-        &.line-2 {
-          display: block;
-          grid-column: 4;
-          width: 90%;
-        }
-
-        &.line-3 {
-          display: block;
-          grid-column: 5;
-          width: 90%;
-        }
-
-        &.line-4 {
-          display: block;
-          grid-column: 6;
-          width: 90%;
-        }
-
-        &.line-5 {
-          display: block;
-          grid-column: 7;
-          width: 90%;
-        }
-
-        &.line-6 {
-          display: block;
-          grid-column: 9;
-          width: 90%;
-        }
-
-        &.line-7 {
-          display: block;
-          grid-column: 10;
-          width: 90%;
-        }
+        width: 90%;
 
         &.circle-0 {
           border-radius: 100%;
-          display: block;
-          grid-column: 8;
           height: 24px;
-          margin-left: 8px;
           width: 24px;
         }
 

app/views/experiments/table.html.erb

@@ -41,7 +41,7 @@
 </div>
 
 <template id="experimentTablePlaceholder">
-  <div class="table-row-placeholder table-row">
+  <div class="table-row-placeholder">
     <div class="header"></div>
     <% 6.times do |i| %>
       <div class="placeholder-cell line-<%= i %>"></div>
@@ -51,6 +51,7 @@
       <div class="placeholder-cell line-<%= 6 + i %>"></div>
     <% end %>
   </div>
+  <div class="table-row-placeholder-divider"></div>
 </template>
 
 <template id="experimentTableEndOfList">