Loader

profcomff · Apr 5, 2024 · 2dee279 · 2dee279
1 parent 44b6d80
commit 2dee279
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 11 deletions.
diff --git a/src/components/FullscreenLoader.vue b/src/components/FullscreenLoader.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts"></script>
+
+<template>
+	<div class="loader-container">
+		<div class="loader" />
+	</div>
+</template>
+
+<style>
+.loader-container {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	place-content: space-around center;
+	width: 100%;
+	height: 100%;
+}
+
+.loader-container > * {
+	margin: 16px auto;
+}
+
+.loader {
+	width: 60px;
+	aspect-ratio: 4;
+	background: radial-gradient(circle closest-side, #000 90%, #0000) 0 / calc(100% / 3) 100% space;
+	clip-path: inset(0 100% 0 0);
+	animation: l1 1s steps(4) infinite;
+}
+
+@keyframes l1 {
+	to {
+		clip-path: inset(0 -34% 0 0);
+	}
+}
+</style>
diff --git a/src/views/apps/AppsView.vue b/src/views/apps/AppsView.vue
@@ -3,6 +3,7 @@ import AsyncContent from './AsyncContent.vue';
 import { computed } from 'vue';
 import IrdomLayout from '@/components/IrdomLayout.vue';
 import { useToolbar } from '@/store/toolbar';
+import FullscreenLoader from '@/components/FullscreenLoader.vue';
 
 const toolbar = useToolbar();
 
@@ -18,7 +19,7 @@ const version = computed(() => import.meta.env.VITE_APP_VERSION);
 		<Suspense>
 			<AsyncContent />
 
-			<template #fallback> Загрузка... </template>
+			<template #fallback> <FullscreenLoader /> </template>
 		</Suspense>
 		<span v-if="version" class="version">Версия приложения: {{ version }}</span>
 	</IrdomLayout>

diff --git a/src/views/profile/ProfileView.vue b/src/views/profile/ProfileView.vue
@@ -12,6 +12,7 @@ import { useProfileStore } from '@/store/profile';
 import { UserdataConverter } from '@/utils/UserdataConverter';
 import { ToolbarActionItem } from '@/components/IrdomToolbar.vue';
 import { useToolbar } from '@/store/toolbar';
+import FullscreenLoader from '@/components/FullscreenLoader.vue';
 
 const profileStore = useProfileStore();
 const router = useRouter();
@@ -102,7 +103,7 @@ onMounted(async () => {
 		</section>
 		<section class="section">
 			<h2>Основная информация</h2>
-			<div v-if="userdataLoading">Загрузка...</div>
+			<FullscreenLoader v-if="userdataLoading" />
 			<div v-else>
 				<div v-for="{ name, data } of userdata" :key="name" class="userdata-section">
 					<div class="userdata-category">

diff --git a/src/views/profile/achievement/AchievementsSlider.vue b/src/views/profile/achievement/AchievementsSlider.vue
@@ -26,7 +26,7 @@ onMounted(async () => {
 		</v-slide-group-item>
 	</v-slide-group>
 	<div v-else-if="!isLoaded">
-		<p>Загрузка...</p>
+		<p><FullscreenLoader /></p>
 	</div>
 	<div v-else>
 		<p>У тебя еще нет достижений в приложении :(</p>

diff --git a/src/views/profile/sessions/ProfileSessionsView.vue b/src/views/profile/sessions/ProfileSessionsView.vue
@@ -2,6 +2,7 @@
 import { useToolbar } from '@/store/toolbar';
 import AsyncContent from './AsyncContent.vue';
 import IrdomLayout from '@/components/IrdomLayout.vue';
+import FullscreenLoader from '@/components/FullscreenLoader.vue';
 
 const toolbar = useToolbar();
 
@@ -15,7 +16,7 @@ toolbar.setup({
 	<IrdomLayout>
 		<Suspense>
 			<AsyncContent />
-			<template #fallback> Загрузка... </template>
+			<template #fallback> <FullscreenLoader /> </template>
 		</Suspense>
 	</IrdomLayout>
 </template>
diff --git a/src/views/timetable/TimetableView.vue b/src/views/timetable/TimetableView.vue
@@ -9,6 +9,7 @@ import { stringifyDate, getDateWithDayOffset } from '@/utils/date';
 import { LocalStorage, LocalStorageItem } from '@/models/LocalStorage';
 import IrdomLayout from '@/components/IrdomLayout.vue';
 import { useToolbar } from '@/store/toolbar';
+import FullscreenLoader from '@/components/FullscreenLoader.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -62,7 +63,7 @@ watch(date, () => {
 		<Suspense :key="key">
 			<AsyncEventsList :date="date" />
 
-			<template #fallback> Загрузка... </template>
+			<template #fallback> <FullscreenLoader /> </template>
 		</Suspense>
 	</IrdomLayout>
 </template>
diff --git a/src/views/timetable/event/TimetableEventView.vue b/src/views/timetable/event/TimetableEventView.vue
@@ -3,6 +3,7 @@ import AsyncContent from './AsyncContent.vue';
 import { useRoute } from 'vue-router';
 import IrdomLayout from '@/components/IrdomLayout.vue';
 import { useToolbar } from '@/store/toolbar';
+import FullscreenLoader from '@/components/FullscreenLoader.vue';
 
 const route = useRoute();
 const toolbar = useToolbar();
@@ -19,7 +20,7 @@ toolbar.setup({
 		<Suspense>
 			<AsyncContent :id="+route.params.id" />
 
-			<template #fallback> Загрузка... </template>
+			<template #fallback> <FullscreenLoader /> </template>
 		</Suspense>
 	</IrdomLayout>
 </template>
diff --git a/src/views/timetable/init/TimetableInitView.vue b/src/views/timetable/init/TimetableInitView.vue
@@ -50,7 +50,7 @@ const sendMarketing = (e: Event) => {
 		<Suspense>
 			<AsyncGroupsList :query="query" />
 
-			<template #fallback> Загрузка... </template>
+			<template #fallback> <FullscreenLoader /> </template>
 		</Suspense>
 	</IrdomLayout>
 </template>

diff --git a/src/views/timetable/lecturer/TimetableLecturerView.vue b/src/views/timetable/lecturer/TimetableLecturerView.vue
@@ -4,6 +4,7 @@ import AsyncLecturerSchedule from './AsyncLecturerSchedule.vue';
 import { useRoute } from 'vue-router';
 import IrdomLayout from '@/components/IrdomLayout.vue';
 import { useToolbar } from '@/store/toolbar';
+import FullscreenLoader from '@/components/FullscreenLoader.vue';
 
 const route = useRoute();
 const toolbar = useToolbar();
@@ -19,15 +20,15 @@ toolbar.setup({
 	<IrdomLayout>
 		<Suspense>
 			<AsyncLecturerInfo :id="+route.params.id" />
-			<template #fallback> Загрузка... </template>
+			<template #fallback> <FullscreenLoader /> </template>
 		</Suspense>
 
 		<b class="date"
 			>Сегодня, {{ new Date().toLocaleDateString('ru-RU', { day: '2-digit', month: 'long' }) }}</b
 		>
 		<Suspense>
 			<AsyncLecturerSchedule :id="+route.params.id" />
-			<template #fallback>Загрузка...</template>
+			<template #fallback><FullscreenLoader /></template>
 		</Suspense>
 	</IrdomLayout>
 </template>

diff --git a/src/views/timetable/room/TimetableRoomView.vue b/src/views/timetable/room/TimetableRoomView.vue
@@ -4,6 +4,7 @@ import AsyncRoomInfo from './AsyncRoomInfo.vue';
 import AsyncRoomSchedule from './AsyncRoomSchedule.vue';
 import IrdomLayout from '@/components/IrdomLayout.vue';
 import { useRoute } from 'vue-router';
+import FullscreenLoader from '@/components/FullscreenLoader.vue';
 
 const route = useRoute();
 const toolbar = useToolbar();
@@ -21,7 +22,7 @@ toolbar.setup({
 			<Suspense>
 				<AsyncRoomInfo :id="+route.params.id" />
 
-				<template #fallback> Загрузка... </template>
+				<template #fallback> <FullscreenLoader /> </template>
 			</Suspense>
 		</section>
 
@@ -42,7 +43,7 @@ toolbar.setup({
 			</p>
 			<Suspense>
 				<AsyncRoomSchedule :id="+route.params.id" />
-				<template #fallback>Загрузка...</template>
+				<template #fallback><FullscreenLoader /></template>
 			</Suspense>
 		</section>
 	</IrdomLayout>