Swimlanes - Update fetching and loading issues strategy

Review feedback

app/assets/javascripts/boards/components/board_card_loading_skeleton.vue

@@ -11,10 +11,9 @@ export default {
 
 <template>
   <div
-    class="gl-mb-3 gl-bg-white gl-rounded-base gl-p-5"
-    style="border: 1px solid #dfdfdf; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); height: 110px"
+    class="board-card-skeleton gl-mb-3 gl-bg-white gl-rounded-base gl-p-5 gl-border-1 gl-border-solid gl-border-gray-50"
   >
-    <div style="width: 340px; height: 100px">
+    <div class="board-card-skeleton-inner">
       <gl-skeleton-loader :width="340" :height="100">
         <rect width="340" height="16" rx="4" />
         <rect y="30" width="118" height="16" rx="8" />

app/assets/stylesheets/page_bundles/boards.scss

@@ -471,3 +471,13 @@
 .board-header-collapsed-info-icon:hover {
   color: var(--gray-900, $gray-900);
 }
+
+.board-card-skeleton {
+  height: 110px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  .board-card-skeleton-inner {
+    width: 340px;
+    height: 100px;
+  }
+}

ee/app/assets/javascripts/boards/components/swimlanes_loading_skeleton.vue

@@ -10,47 +10,8 @@ export default {
 
 <template>
   <div class="gl-px-3">
-    <div class="gl-mt-6 gl-bg-gray-100 gl-display-inline-flex gl-rounded-base">
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3">
-        <board-card-loading-skeleton />
-      </div>
-    </div>
-    <br />
-    <div class="gl-mt-6 gl-bg-gray-100 gl-display-inline-flex gl-rounded-base">
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3">
-        <board-card-loading-skeleton />
-      </div>
-    </div>
-    <br />
-    <div class="gl-mt-6 gl-bg-gray-100 gl-display-inline-flex gl-rounded-base">
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3 gl-mr-3">
-        <board-card-loading-skeleton />
-      </div>
-      <div class="gl-px-3 gl-pt-3">
+    <div v-for="i in 3" :key="i" class="gl-mt-6 gl-bg-gray-100 gl-display-flex gl-rounded-base">
+      <div v-for="j in 4" :key="j" class="gl-px-3 gl-pt-3">
         <board-card-loading-skeleton />
       </div>
     </div>