refactor: use unified manager design

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/pages/ChronoPage.vue

@@ -41,6 +41,7 @@ const {
   editingCollection,
   collectionEditorMode,
   collectionEditorType,
+  loading,
   calendars,
   taskLists,
   isTaskView,
@@ -223,27 +224,31 @@ watch(() => route.fullPath, () => {
           </div>
         </v-alert>
 
-        <CalendarView
-          v-if="!isTaskView"
-          :view="calendarView"
-          :current-date="currentDate"
-          :events="filteredEvents"
-          :calendars="calendars"
-          :initial-days-span="daysViewSpan"
-          :initial-agenda-view-span="agendaViewSpan"
-          @event-click="editEvent"
-          @date-click="createEventFromDate"
-          @update:days-span="setDaysViewSpan"
-          @update:agenda-span="setAgendaViewSpan"
-        />
+        <div v-if="isChronoManagerAvailable" class="chrono-wrapper">
+          <v-progress-linear v-if="loading" indeterminate color="primary" />
 
-        <TaskView
-          v-else
-          :tasks="filteredTasks"
-          :lists="taskLists"
-          @task-click="editTask"
-          @toggle-complete="toggleTaskComplete"
-        />
+          <CalendarView
+            v-if="!isTaskView"
+            :view="calendarView"
+            :current-date="currentDate"
+            :events="filteredEvents"
+            :calendars="calendars"
+            :initial-days-span="daysViewSpan"
+            :initial-agenda-view-span="agendaViewSpan"
+            @event-click="editEvent"
+            @date-click="createEventFromDate"
+            @update:days-span="setDaysViewSpan"
+            @update:agenda-span="setAgendaViewSpan"
+          />
+
+          <TaskView
+            v-else
+            :tasks="filteredTasks"
+            :lists="taskLists"
+            @task-click="editTask"
+            @toggle-complete="toggleTaskComplete"
+          />
+        </div>
       </div>
     </div>
 
@@ -322,6 +327,13 @@ watch(() => route.fullPath, () => {
   flex-direction: column;
 }
 
+.chrono-wrapper {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+}
+
 .border-b {
   border-bottom: 1px solid rgb(var(--v-border-color));
 }