Add new feature: loading grids which are disabled and show loaders

src/DragGrid.vue

 <template>
   <interact
     droppable
-    @dropmove="disabled ? undefined : handleDragOver($event)"
-    @drop.prevent="disabled ? undefined : handleDrop($event)"
+    @dropmove="disabled || loading ? undefined : handleDragOver($event)"
+    @drop.prevent="disabled || loading ? undefined : handleDrop($event)"
     @dragleave="$refs.highlightContainer.style.display = 'none'"
     class="grid"
   >
-    <div class="highlight-container" ref="highlightContainer">
-      <slot name="highlight">
-        <div class="highlight"></div>
-      </slot>
-    </div>
-    <DragContainer
-      v-for="item in value"
-      :key="item.key"
-      :drag-i-d="item.key"
-      :x="getInt('x', item)"
-      :y="getInt('y', item)"
-      :w="getInt('w', item)"
-      :h="getInt('h', item)"
-      :data="getObject('data', item)"
-      :context="context"
-      :grid-id="gridId"
-      :disabled="disabled || item.disabled"
-    >
-      <slot v-bind="transformItem(item)" :raw-item="item" name="item">
-        <dl>
-          <dt>Key</dt>
-          <dd>{{ item.key }}</dd>
-          <dt>Position</dt>
-          <dd>{{ item.x }}, {{ item.y }}</dd>
-          <dt>Size</dt>
-          <dd>{{ item.w }} × {{ item.h }}</dd>
-          <dt>Data</dt>
-          <dd>{{ item.data }}</dd>
-        </dl>
-      </slot>
-    </DragContainer>
-    <template v-for="disabledField in disabledFields">
-      <GridItem
-        class="disabledField"
-        :x="disabledField.x"
-        :y="disabledField.y"
-        :key="disabledField.x + '|' + disabledField.y"
+    <template v-if="loading">
+      <template v-for="loader in cols * rows">
+        <div :key="loader">
+          <slot name="loader"></slot>
+        </div>
+      </template>
+    </template>
+
+    <template v-else>
+      <div class="highlight-container" ref="highlightContainer">
+        <slot name="highlight">
+          <div class="highlight"></div>
+        </slot>
+      </div>
+
+      <DragContainer
+        v-for="item in value"
+        :key="item.key"
+        :drag-i-d="item.key"
+        :x="getInt('x', item)"
+        :y="getInt('y', item)"
+        :w="getInt('w', item)"
+        :h="getInt('h', item)"
+        :data="getObject('data', item)"
+        :context="context"
+        :grid-id="gridId"
+        :disabled="disabled || loading || item.disabled"
       >
-        <slot name="disabledField"></slot>
-      </GridItem>
+        <slot v-bind="transformItem(item)" :raw-item="item" name="item">
+          <dl>
+            <dt>Key</dt>
+            <dd>{{ item.key }}</dd>
+            <dt>Position</dt>
+            <dd>{{ item.x }}, {{ item.y }}</dd>
+            <dt>Size</dt>
+            <dd>{{ item.w }} × {{ item.h }}</dd>
+            <dt>Data</dt>
+            <dd>{{ item.data }}</dd>
+          </dl>
+        </slot>
+      </DragContainer>
+      <template v-for="disabledField in disabledFields">
+        <GridItem
+          class="disabledField"
+          :x="disabledField.x"
+          :y="disabledField.y"
+          :key="disabledField.x + '|' + disabledField.y"
+        >
+          <slot name="disabledField"></slot>
+        </GridItem>
+      </template>
+      <slot></slot>
     </template>
-    <slot></slot>
   </interact>
 </template>
 
@@ -111,6 +122,11 @@ export default {
       required: false,
       default: () => [],
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   methods: {
     positionAllowed(x, y, key) {