Hide task elements while the task is loading

src/styles/components/task.scss

@@ -200,7 +200,24 @@
 }
 
 .task-view-container {
-  padding-bottom: 1em;
+  padding-bottom: 1rem;
+
+  .task-view * {
+    opacity: 0;
+    transition: opacity 50ms ease;
+  }
+
+  &.is-loading {
+    opacity: 1;
+
+    .task-view * {
+      opacity: 0;
+    }
+  }
+
+  &.visible:not(.is-loading) .task-view * {
+    opacity: 1;
+  }
 }
 
 .is-done {

src/styles/theme/variables.scss

@@ -31,7 +31,8 @@ $vikunja-nav-background: $light-background;
 $vikunja-nav-color: lighten($black, 25);
 $vikunja-nav-selected-width: 0.4em;
 
-$transition: 150ms ease;
+$transition-duration: 150ms;
+$transition: $transition-duration ease;
 
 $multiselect-primary: $green;
 $multiselect-dark: #35495e;

src/views/tasks/TaskDetailView.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="{ 'is-loading': taskService.loading}" class="loader-container task-view-container">
+	<div :class="{ 'is-loading': taskService.loading, 'visible': visible}" class="loader-container task-view-container">
 		<div class="task-view">
 			<heading v-model="task" :can-write="canWrite" ref="heading"/>
 			<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
@@ -458,6 +458,8 @@ export default {
 			showDeleteModal: false,
 			descriptionChanged: false,
 			listViewName: 'list.list',
+			// Used to avoid flashing of empty elements if the task content is not yet loaded.
+			visible: false,
 
 			priorities: priorites,
 			activeFields: {
@@ -492,6 +494,8 @@ export default {
 			this.listViewName = `list.${parts[1]}`
 		}
 
+		console.log(this.task)
+
 		this.loadTask()
 	},
 	computed: {
@@ -543,6 +547,7 @@ export default {
 					this.error(e, this)
 				})
 				.finally(() => {
+					this.$nextTick(() => this.visible = true)
 					this.scrollToHeading()
 				})
 		},