feat(optimize): оптимизация рендеринга на странице блога и расписания; добавлен лоадер, если загрузка страницы требует много ресурсов

components/Base/Header.vue

@@ -1,7 +1,9 @@
 <template>
   <header
-    class="w-full flex justify-between gap-5 bg-background-100 p-3 animate__animated animate__fadeInDown animate__faster z-10"
+  class="w-full flex justify-between gap-5 bg-background-100 p-3 animate__animated animate__fadeInDown animate__faster z-10"
   >
+    <NuxtLoadingIndicator class="w-full" :height="2" color="#e5e7eb" />
+    
     <ISandwich
       class="w-8 h-8 hover:opacity-50 cursor-pointer duration-150"
       @click="sideBar.show()"
@@ -78,4 +80,4 @@ function show() {
   showAnim.value = true
   updateColors('#171717')
 }
-</script>
+</script>

components/Base/SideBar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="store.isRendered"
+    v-show="store.isRendered"
     ref="sideBarEl"
     class="w-screen h-screen fixed top-0 left-0 z-30"
   >
@@ -131,7 +131,7 @@ const user = useUser()
 
 const links = ref<{
   name: string
-  icon: 'home' | 'license' | 'calendar' | 'mail' | 'bell' | 'photo' | 'chart'
+  icon: 'home' | 'license' | 'calendar' | 'mail' | 'bell' | 'photo' | 'chart' | 'contacts'
   route: string
 }[]>([
   {
@@ -159,6 +159,11 @@ const links = ref<{
   //   icon: 'bell',
   //   route: '/notifications',
   // },
+  {
+    name: 'Контакты',
+    icon: 'contacts',
+    route: '/contacts'
+  },
   {
     name: 'Галерея',
     icon: 'photo',

pages/blog/index.vue

@@ -6,7 +6,7 @@
       </button>
     </NuxtLink> -->
     <div
-      v-if="!postList"
+      v-show="postList?.items.length === 0"
       class="w-full h-full"
     >
       <div
@@ -16,18 +16,17 @@
         class="w-full h-32 loading rounded-md opacity-30"
       />
     </div>
-    <template v-else>
-      <BlogPost
-        v-for="(post, idx) in postList.items"
-        :key="idx"
-        :avatar="post.avatar"
-        :title="post.title"
-        :raw_content="post.raw_content"
-        :date="post.date"
-        :author="post.author"
-        :attachments="post.attachments"
-      />
-    </template>
+    <BlogPost
+      v-show="postList?.items.length > 0"
+      v-for="(post, idx) in postList.items"
+      :key="idx"
+      :avatar="post.avatar"
+      :title="post.title"
+      :raw_content="post.raw_content"
+      :date="post.date"
+      :author="post.author"
+      :attachments="post.attachments"
+    />
   </div>
 </template>
 
@@ -40,7 +39,9 @@ definePageMeta({
 })
 
 const { $api } = useNuxtApp()
-const postList = ref<TPosts>()
+const postList = ref<TPosts>({
+  items: []
+})
 
 onMounted(async () => {
   postList.value = await $api.blog.getPosts()

pages/timetable/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div
-    v-if="!timetable"
+    v-show="!timetable"
     class="w-full h-full flex items-center justify-center show"
   >
     <ILoader class="w-16 h-16 text-foreground" />
   </div>
   <div
-    v-else
+    v-if="timetable"
     class="flex flex-col gap-2 show py-4 h-full"
   >
     <div
-      v-if="week"
+      v-show="week"
       class="grid grid-cols-3 place-items-center mb-5"
     >
       <img
@@ -31,7 +31,7 @@
         @click="nextWeek"
       >
     </div>
-    <template v-if="hasLessons">
+    <template v-show="hasLessons">
       <div
         v-for="(day, dayIdx) in timetable.days"
         :key="day.title"
@@ -91,7 +91,7 @@
       </div>
     </template>
     <div
-      v-else
+      v-show="!hasLessons"
       class="w-full h-full flex items-center justify-center"
     >
       <p class="text-2xl font-semibold text-center">