🛢️ feature/bulk annotation

frontend/components/feedback-task/container/mode/BulkAnnotation.vue

@@ -1,80 +1,83 @@
 <template>
-  <div class="wrapper">
-    <section class="wrapper__records">
-      <DatasetFiltersComponent :recordCriteria="recordCriteria">
-        <ToggleAnnotationType
-          v-if="
-            records.hasRecordsToAnnotate && recordCriteria.committed.isPending
-          "
-          :recordCriteria="recordCriteria"
-      /></DatasetFiltersComponent>
-      <div class="wrapper__records__header">
-        <div class="wrapper__records__header--left">
-          <BaseCheckbox
-            v-if="records.hasRecordsToAnnotate"
-            class="wrapper__records__header__checkbox"
-            :value="selectedRecords.length === recordsOnPage.length"
-            @input="toggleAllRecords"
-          />
-          <span
-            class="wrapper__records__header__selection-text"
-            v-if="selectedRecords.length"
-            v-text="
-              $tc('bulkAnnotation.recordsSelected', selectedRecords.length)
+  <span>
+    <LoadLine v-if="isSubmitting || isDraftSaving || isDiscarding" />
+    <div class="wrapper">
+      <section class="wrapper__records">
+        <DatasetFiltersComponent :recordCriteria="recordCriteria">
+          <ToggleAnnotationType
+            v-if="
+              records.hasRecordsToAnnotate && recordCriteria.committed.isPending
             "
+            :recordCriteria="recordCriteria"
+        /></DatasetFiltersComponent>
+        <div class="wrapper__records__header">
+          <div class="wrapper__records__header--left">
+            <BaseCheckbox
+              v-if="records.hasRecordsToAnnotate"
+              class="wrapper__records__header__checkbox"
+              :value="selectedRecords.length === recordsOnPage.length"
+              @input="toggleAllRecords"
+            />
+            <span
+              class="wrapper__records__header__selection-text"
+              v-if="selectedRecords.length"
+              v-text="
+                $tc('bulkAnnotation.recordsSelected', selectedRecords.length)
+              "
+            />
+          </div>
+          <RecordsViewConfig
+            v-if="records.hasRecordsToAnnotate"
+            v-model="recordHeight"
           />
+          <PaginationFeedbackTaskComponent :recordCriteria="recordCriteria" />
         </div>
-        <RecordsViewConfig
-          v-if="records.hasRecordsToAnnotate"
-          v-model="recordHeight"
-        />
-        <PaginationFeedbackTaskComponent :recordCriteria="recordCriteria" />
-      </div>
-      <SimilarityRecordReference
-        v-show="recordCriteria.isFilteringBySimilarity"
-        v-if="!!records.reference"
-        :fields="records.reference.fields"
-        :recordCriteria="recordCriteria"
-        :availableVectors="datasetVectors"
-      />
-      <div class="bulk__records snap" v-if="records.hasRecordsToAnnotate">
-        <Record
-          class="snap-child"
-          :class="{
-            'record__wrapper--fixed-height': recordHeight === 'fixedHeight',
-          }"
-          v-for="(record, i) in recordsOnPage"
-          :key="`${recordCriteria.committed.page}_${record.id}_${i}`"
-          :datasetVectors="datasetVectors"
+        <SimilarityRecordReference
+          v-show="recordCriteria.isFilteringBySimilarity"
+          v-if="!!records.reference"
+          :fields="records.reference.fields"
           :recordCriteria="recordCriteria"
-          :record="record"
-          :selectedRecords="selectedRecords"
-          @on-select-record="onSelectRecord"
+          :availableVectors="datasetVectors"
         />
-      </div>
-      <div v-else class="wrapper--empty">
-        <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
-      </div>
-    </section>
+        <div class="bulk__records snap" v-if="records.hasRecordsToAnnotate">
+          <Record
+            class="snap-child"
+            :class="{
+              'record__wrapper--fixed-height': recordHeight === 'fixedHeight',
+            }"
+            v-for="(record, i) in recordsOnPage"
+            :key="`${recordCriteria.committed.page}_${record.id}_${i}`"
+            :datasetVectors="datasetVectors"
+            :recordCriteria="recordCriteria"
+            :record="record"
+            :selectedRecords="selectedRecords"
+            @on-select-record="onSelectRecord"
+          />
+        </div>
+        <div v-else class="wrapper--empty">
+          <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
+        </div>
+      </section>
 
-    <QuestionsFormComponent
-      v-if="!!record"
-      :key="`${record.id}_questions`"
-      class="wrapper__form"
-      :class="statusClass"
-      :datasetId="recordCriteria.datasetId"
-      :record="record"
-      :show-discard-button="recordsOnPage.some((r) => !r.isDiscarded)"
-      :is-draft-saving="isDraftSaving"
-      :is-submitting="isSubmitting"
-      :is-discarding="isDiscarding"
-      :are-actions-enabled="hasSelectedAtLeastOneRecord"
-      :number-of-selected-records="selectedRecords.length"
-      @on-submit-responses="onSubmit"
-      @on-discard-responses="onDiscard"
-      @on-save-draft="onSaveDraft"
-    />
-  </div>
+      <QuestionsFormComponent
+        v-if="!!record"
+        :key="`${record.id}_questions`"
+        class="wrapper__form"
+        :class="statusClass"
+        :datasetId="recordCriteria.datasetId"
+        :record="record"
+        :show-discard-button="recordsOnPage.some((r) => !r.isDiscarded)"
+        :is-draft-saving="isDraftSaving"
+        :is-submitting="isSubmitting"
+        :is-discarding="isDiscarding"
+        :are-actions-enabled="hasSelectedAtLeastOneRecord"
+        :number-of-selected-records="selectedRecords.length"
+        @on-submit-responses="onSubmit"
+        @on-discard-responses="onDiscard"
+        @on-save-draft="onSaveDraft"
+      />
+    </div>
+  </span>
 </template>
 <script>
 import { useBulkAnnotationViewModel } from "./useBulkAnnotationViewModel";

frontend/components/feedback-task/header/load-line/LoadLine.vue

@@ -0,0 +1,54 @@
+<!--
+  - coding=utf-8
+  - Copyright 2021-present, the Recognai S.L. team.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <span
+    class="load-line"
+    :style="{ minWidth: 100, background: color, height: height }"
+  ></span>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "#ff675f",
+    },
+    height: {
+      type: String,
+      default: "2px",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.load-line {
+  position: absolute;
+  width: 100%;
+  animation: load 0.8s ease-in-out infinite;
+}
+@keyframes load {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>