Merge branch '140-label-loading-animation' into 'master'

Resolve "label loading animation"

Closes #140

See merge request troebs/pycs!126

webui/src/components/projects/project-labels-window.vue

@@ -6,21 +6,26 @@
       Labels
     </h1>
 
-    <label-tree-view v-for="label in labelTree" :key="label.identifier"
-                     :label="label"
-                     :targetable="true"
-                     indent="2rem"/>
-
-    <div class="label">
-      <input-group>
-        <text-input placeholder="New Label"
-                    v-model="createLabelValue"
-                    @enter="createLabel"/>
-        <button-input type="primary" @click="createLabel">
-          create
-        </button-input>
-      </input-group>
-    </div>
+    <template v-if="labels !== false">
+      <label-tree-view v-for="label in labelTree" :key="label.identifier"
+                       :label="label"
+                       :targetable="true"
+                       indent="2rem"/>
+
+      <div class="label">
+        <input-group>
+          <text-input placeholder="New Label"
+                      v-model="createLabelValue"
+                      @enter="createLabel"/>
+          <button-input type="primary" @click="createLabel">
+            create
+          </button-input>
+        </input-group>
+      </div>
+    </template>
+    <template v-else>
+      <loading-icon/>
+    </template>
   </div>
 </template>
 
@@ -29,10 +34,11 @@ import TextInput from "@/components/base/text-input";
 import ButtonInput from "@/components/base/button-input";
 import InputGroup from "@/components/base/input-group";
 import LabelTreeView from "@/components/other/LabelTreeView";
+import LoadingIcon from "@/components/base/loading-icon";
 
 export default {
   name: "project-labels-window",
-  components: {LabelTreeView, InputGroup, ButtonInput, TextInput},
+  components: {LoadingIcon, LabelTreeView, InputGroup, ButtonInput, TextInput},
   created: function () {
     // get labels
     this.getLabels();
@@ -51,7 +57,7 @@ export default {
   },
   data: function () {
     return {
-      labels: [],
+      labels: false,
       createLabelValue: '',
       target: false
     }
@@ -171,6 +177,11 @@ h1.target {
   text-decoration: underline;
 }
 
+.loading-icon {
+  width: 4rem;
+  height: 4rem;
+}
+
 /*
 /deep/ .element {
   border: none;