Simple loading state for circle view and app transitions

client/src/App.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="app" class="flex flex-col min-h-screen">
     <MainNavigationBar class="flex-none" />
-    <RouterView class="flex-auto" />
+    <RouterView class="flex-auto" v-slot="{ Component }">
+      <Transition mode="out-in" name="app">
+        <component :is="Component"></component>
+      </Transition>
+    </RouterView>
     <Footer class="flex-none" />
   </div>
 </template>
@@ -20,3 +24,16 @@ onMounted(() => {
 });
 
 </script>
+
+<style lang="postcss" scoped>
+.app-enter-active,
+.app-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.app-enter-from,
+.app-leave-to {
+  opacity: 0;
+}
+
+</style>

client/src/components/MainNavigationBar.vue

@@ -43,7 +43,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Transition>
+  <Transition name="nav">
     <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
       <nav
         class="
@@ -126,7 +126,7 @@ onMounted(() => {
           </router-link>
 
           <hr class="text-white lg:hidden">
-          <div class="hidden lg:list-item flex-auto"></div>
+          <div class="hidden lg:block flex-auto"></div>
           <router-link
             to="/mediacenter"
             class="nav-item"
@@ -171,13 +171,13 @@ onMounted(() => {
   @apply underline underline-offset-[21px] decoration-sky-500 decoration-4
 }
 
-.v-enter-active,
-.v-leave-active {
+.nav-enter-active,
+.nav-leave-active {
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-.v-enter-from,
-.v-leave-to {
+.nav-enter-from,
+.nav-leave-to {
   opacity: 0;
   transform: translateY(-80px);
 }

client/src/views/CircleView.vue

@@ -35,15 +35,15 @@ onMounted(async () => {
     <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
       <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
     </div>
-    <div v-else-if="circleStore.circle">
+    <div v-else>
       <div class="circle">
         <div class="flex flex-col lg:flex-row">
           <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:py-8">
             <h1 class="text-blue-dark text-7xl">
-              {{ circleStore.circle.title }}
+              {{ circleStore.circle?.title }}
             </h1>
 
-            <div v-if="circleStore.circle" class="w-full mt-8">
+            <div class="w-full mt-8">
               <CircleDiagram></CircleDiagram>
             </div>
 
@@ -65,7 +65,7 @@ onMounted(async () => {
               <div class="block border border-gray-500 mt-8 p-6">
                 <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
                 <div class="prose mt-4">
-                  {{ circleStore.circle.description }}
+                  {{ circleStore.circle?.description }}
                 </div>
 
                 <button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
@@ -83,7 +83,7 @@ onMounted(async () => {
 
           <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
             <div
-              v-for="learningSequence in circleStore.circle.learningSequences"
+              v-for="learningSequence in circleStore.circle?.learningSequences || []"
               :key="learningSequence.translation_key"
             >
               <LearningSequence