feat: loader shown on init, icon set is new

szattila98 · Mar 23, 2024 · 6c38f8f · 6c38f8f
1 parent 77de97d
commit 6c38f8f
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
 	"dependencies": {
 		"@tauri-apps/api": "1.5.3",
 		"dayjs": "1.11.10",
-		"svelte-icons": "2.1.0",
 		"ts-toolbelt": "^9.6.0"
 	},
 	"devDependencies": {

diff --git a/src/App.svelte b/src/App.svelte
@@ -6,14 +6,17 @@
 	import List from './view/List.svelte';
 	import { todaysHighlight } from './store';
 	import { exit } from '@tauri-apps/api/process';
+	import Spinner from './lib/components/Spinner.svelte';
+	import { fade } from 'svelte/transition';
 
 	enum AppState {
+		Loading,
 		Menu,
 		Record,
 		List
 	}
 
-	let state: AppState = AppState.Menu;
+	let state: AppState = AppState.Loading;
 
 	const init = async () => {
 		const result = await commands.getTodaysHighlight();
@@ -36,7 +39,11 @@
 	const toMenu = () => (state = AppState.Menu);
 </script>
 
-{#if state === AppState.Menu}
+{#if state === AppState.Loading}
+	<div class="loader">
+		<Spinner />
+	</div>
+{:else if state === AppState.Menu}
 	<Menu
 		on:toNew={() => (state = AppState.Record)}
 		on:toList={() => (state = AppState.List)}
@@ -47,3 +54,12 @@
 {:else if state === AppState.List}
 	<List on:toMenu={toMenu} />
 {/if}
+
+<style scoped>
+	.loader {
+		align-items: center;
+		display: flex;
+		height: 90vh;
+		justify-content: center;
+	}
+</style>
diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte
@@ -0,0 +1,58 @@
+<div class="loader"></div>
+
+<style scoped>
+	.loader {
+		animation: l5 2s infinite;
+		aspect-ratio: 1;
+		background: radial-gradient(farthest-side, #ed303c 94%, #0000),
+			radial-gradient(farthest-side, #3b8183 94%, #0000),
+			radial-gradient(farthest-side, #fad089 94%, #0000),
+			radial-gradient(farthest-side, #ff9c5b 94%, #0000), #ed303c;
+		background-repeat: no-repeat;
+		background-size: 105% 105%;
+		border-radius: 50%;
+		width: 40px;
+	}
+
+	@keyframes l5 {
+		0% {
+			background-position:
+				50% -50px,
+				-40px 50%,
+				50% calc(100% + 50px),
+				calc(100% + 50px) 50%;
+		}
+		20%,
+		25% {
+			background-position:
+				50% -50px,
+				-50px 50%,
+				50% calc(100% + 50px),
+				50% 50%;
+		}
+		45%,
+		50% {
+			background-position:
+				50% -50px,
+				-50px 50%,
+				50% 50%,
+				50% 50%;
+		}
+		75%,
+		75% {
+			background-position:
+				50% -50px,
+				50% 50%,
+				50% 50%,
+				50% 50%;
+		}
+		95%,
+		100% {
+			background-position:
+				50% 50%,
+				50% 50%,
+				50% 50%,
+				50% 50%;
+		}
+	}
+</style>
diff --git a/src/lib/layouts/ViewHeader.svelte b/src/lib/layouts/ViewHeader.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import FaArrowLeft from 'svelte-icons/fa/FaArrowLeft.svelte';
 
 	const dispatch = createEventDispatcher<{ toMenu: null }>();
 </script>
 
 <header>
 	<button on:click={() => dispatch('toMenu')}>
-		<FaArrowLeft />
+		<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+			><path
+				d="M20.3284 11.0001V13.0001L7.50011 13.0001L10.7426 16.2426L9.32842 17.6568L3.67157 12L9.32842 6.34314L10.7426 7.75735L7.49988 11.0001L20.3284 11.0001Z"
+				fill="currentColor"
+			/></svg
+		>
 	</button>
 	<slot name="middle" />
 	<slot name="right" />
@@ -30,7 +34,7 @@
 			display: flex;
 
 			& svg {
-				width: 32px;
+				width: 40px;
 			}
 
 			&:hover {

diff --git a/src/view/List.svelte b/src/view/List.svelte
@@ -2,7 +2,6 @@
 	import { commands } from '../bindings';
 	import dayjs from 'dayjs';
 	import RandomEmoji from '../lib/components/RandomEmoji.svelte';
-	import FaRegCalendarAlt from 'svelte-icons/fa/FaRegCalendarAlt.svelte';
 	import { happyEmojis, sadEmojis } from '../lib/constants/emojis';
 	import ViewHeader from '@/lib/layouts/ViewHeader.svelte';
 	import ViewMain from '@/lib/layouts/ViewMain.svelte';
@@ -11,7 +10,19 @@
 
 <ViewHeader on:toMenu>
 	<h2 slot="middle">Highlights</h2>
-	<button slot="right" class="calendar-btn"><FaRegCalendarAlt /></button>
+	<button slot="right" class="calendar-btn">
+		<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+			><path
+				d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9H8Z"
+				fill="currentColor"
+			/><path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
+				fill="currentColor"
+			/></svg
+		>
+	</button>
 </ViewHeader>
 <ViewMain>
 	{#await commands.listHighlights()}
@@ -114,7 +125,7 @@
 		padding: 8px;
 
 		& svg {
-			width: 32px;
+			width: 40px;
 		}
 
 		&:hover {

diff --git a/src/view/Record.svelte b/src/view/Record.svelte
@@ -2,7 +2,6 @@
 	import { createEventDispatcher } from 'svelte';
 	import ViewHeader from '@/lib/layouts/ViewHeader.svelte';
 	import ViewMain from '@/lib/layouts/ViewMain.svelte';
-	import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
 	import type { CreateHighlightRequest } from '@/bindings';
 	import type { Nullable } from 'ts-toolbelt/out/Object/Nullable';
 	import RandomEmoji from '@/lib/components/RandomEmoji.svelte';
@@ -31,19 +30,18 @@
 		[HighlightKind.BEST]: { content: null, kind: HighlightKind.BEST }
 	};
 
-	$: submitDisabled = kind === 'WORST' ? !model['WORST'].content : !model['BEST'].content;
-
-	// Középen legyen egy átkattinható BEST|WORST radio gomb ami vált boldog és szomorú textarea között
-	// alatta submit gomb, enterre is megy
-	// alatta pedig random színes listában amit felvittél, lehet prop
-	// random emoji a válaszott rádiógomb mellett
+	$: submitDisabled =
+		submitting || (kind === 'WORST' ? !model['WORST'].content : !model['BEST'].content);
 
+	let submitting = false;
 	const submit = () => {
+		submitting = true;
 		const highlight = model[kind];
 		if (highlight.content) {
 			dispatch('submit', { content: highlight.content, kind });
 			model[kind].content = '';
 		}
+		submitting = false;
 	};
 </script>
 
@@ -88,7 +86,18 @@
 				</label>
 			</div>
 			<button type="submit" disabled={submitDisabled}>
-				<FaPlus />
+				<svg
+					width="32"
+					height="32"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z"
+						fill="currentColor"
+					/>
+				</svg>
 			</button>
 		</div>
 		{#if kind === HighlightKind.WORST}
@@ -169,7 +178,6 @@
 				align-items: center;
 				background: transparent;
 				border: none;
-				color: var(--very-dark);
 				display: flex;
 				transition: color 0.2s ease;
 				width: 40px;
@@ -186,13 +194,19 @@
 				color: var(--light);
 				cursor: default;
 			}
+
+			& button:disabled:hover {
+				background: transparent;
+				color: var(--light);
+				cursor: default;
+			}
 		}
 
 		& textarea {
+			border-bottom-left-radius: 8px;
+			border-bottom-right-radius: 8px;
 			border-color: var(--dark);
-			border-radius: 8px;
 			border-style: solid;
-			border-top-left-radius: 0;
 			border-width: 4px;
 			font-size: small;
 			padding: 0;

diff --git a/yarn.lock b/yarn.lock
@@ -4390,13 +4390,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-icons@npm:2.1.0":
-  version: 2.1.0
-  resolution: "svelte-icons@npm:2.1.0"
-  checksum: 10c0/1150b9f67302e3b3b2b7d403d5695a5e11d3f77a10393516b719ce3b306e9a300a0fc02be9ff328a2488723feccdad7709329a97c7d43d55605ab00566a482f2
-  languageName: node
-  linkType: hard
-
 "svelte-preprocess@npm:^5.1.3":
   version: 5.1.3
   resolution: "svelte-preprocess@npm:5.1.3"
@@ -4738,7 +4731,6 @@ __metadata:
     stylelint-prettier: "npm:5.0.0"
     svelte: "npm:4.2.12"
     svelte-check: "npm:3.6.6"
-    svelte-icons: "npm:2.1.0"
     ts-toolbelt: "npm:^9.6.0"
     tslib: "npm:2.6.2"
     typescript: "npm:5.3.3"