feat: UI improvements

Author: Aleksander Grygier

apps/web/src/lib/components/LoadingSpinner.svelte

@@ -0,0 +1,45 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	export let delay = 600;
+</script>
+
+<div class="loading-spinner" in:fade={{ duration: 100, delay }} out:fade={{ duration: 100 }}>
+	<div />
+	<div />
+</div>
+
+<style>
+	@keyframes rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.loading-spinner {
+		--loading-spinner-border-width: 3px;
+		display: inline-block;
+		position: relative;
+		width: var(--size, 2rem);
+		height: var(--size, 2rem);
+	}
+
+	.loading-spinner div {
+		box-sizing: border-box;
+		display: block;
+		position: absolute;
+		width: var(--size);
+		height: var(--size);
+		border: var(--loading-spinner-border-width) solid var(--c-text);
+		border-radius: 50%;
+		animation: rotate 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+		border-color: var(--c-text) transparent transparent transparent;
+	}
+
+	.loading-spinner:nth-child(1) {
+		animation-delay: -0.375s;
+	}
+</style>

apps/web/src/lib/components/RecordingTile.svelte

@@ -4,6 +4,7 @@
 	import Button from './Button.svelte';
 	import { browser } from '$app/environment';
 	import transcribeRecording from '$lib/methods/transcribe-recording';
+	import LoadingSpinner from './LoadingSpinner.svelte';
 
 	interface RecordingTileProps {
 		blob: Blob;
@@ -25,6 +26,7 @@
 		url
 	}: RecordingTileProps = $props();
 	let isPlaying = $state(false);
+	let isTranscribing = $state(false);
 	let waveformContainer: HTMLElement;
 	let wavesurfer: WaveSurfer;
 	let progressColor = $state(
@@ -86,28 +88,39 @@
 		</div>
 	{:else}
 		<div class="transcribe-cta">
-			<span> You haven't transcribed this recording yet. </span>
-
-			<Button
-				kind="secondary"
-				label="Transcribe"
-				onclick={async () => {
-					if (!savedRecordings) {
-						return;
-					}
-
-					const transcriptionResult = await transcribeRecording(blob);
-					transcription = transcriptionResult ? transcriptionResult.text : '';
-
-					savedRecordings = savedRecordings.map((rec) => {
-						if (rec.id === id) {
-							rec.transcription = transcription;
+			{#if isTranscribing}
+				<LoadingSpinner --size="1.5rem" />
+
+				<span> Transcription in progress... </span>
+			{:else}
+				<span> You haven't transcribed this recording yet. </span>
+
+				<Button
+					kind="secondary"
+					label="Transcribe"
+					onclick={async () => {
+						if (!savedRecordings) {
+							return;
 						}
 
-						return rec;
-					});
-				}}
-			/>
+						isTranscribing = true;
+
+						const transcriptionResult = await transcribeRecording(blob);
+
+						transcription = transcriptionResult ? transcriptionResult.text : '';
+
+						isTranscribing = false;
+
+						savedRecordings = savedRecordings.map((rec) => {
+							if (rec.id === id) {
+								rec.transcription = transcription;
+							}
+
+							return rec;
+						});
+					}}
+				/>
+			{/if}
 		</div>
 	{/if}
 
@@ -164,6 +177,7 @@
 
 	.transcription {
 		padding: 1rem;
+		display: inline-grid;
 
 		.inner {
 			padding: 1rem;
@@ -179,7 +193,7 @@
 	.transcribe-cta {
 		display: grid;
 		padding: 1rem;
-		gap: 1rem;
+		gap: 1.25rem;
 		place-items: center;
 	}
 </style>

apps/web/src/routes/+page.svelte

@@ -90,26 +90,26 @@
 </script>
 
 <svelte:head>
-	<title>Memvo — Share or publish recordings with transcriptions</title>
+	<title>Memvo — Easily share recordings with transcriptions</title>
 
 	<meta
 		name="description"
-		content="Instant recordings 🔴 with transcriptions 📝 that you can publish 📤 to Google Docs."
+		content="Instant recordings 🔴 with transcriptions 📝 that you can share 📤."
 	/>
 </svelte:head>
 
 <main>
 	<div class="hero">
 		<div class="text">
 			<h1>
-				Record, transcribe and publish.
+				Record, transcribe and share.
 				<br />
 				<strong>It's that simple.</strong>
 			</h1>
 
-			<p>
+			<!-- <p>
 				The easiest way to instantly get your ideas, interviews and conversations to Google Docs.
-			</p>
+			</p> -->
 		</div>
 
 		<Recorder {discardRecording} bind:recordingUrl {saveRecording} />
@@ -139,7 +139,7 @@
 <style>
 	.hero {
 		display: grid;
-		gap: 2.5rem;
+		gap: 4rem;
 		padding-block: 2.5rem;
 		text-align: center;
 
@@ -150,10 +150,15 @@
 
 	.hero .text {
 		display: grid;
-		gap: 1rem;
-		padding: 1.5rem;
-		margin-bottom: 3rem;
+		padding: 0 1rem;
+		gap: 0.5rem;
 		place-self: center;
+
+		@media (width >= 768px) {
+			gap: 1rem;
+			margin-bottom: 3rem;
+			padding: 1.5rem;
+		}
 	}
 
 	.hero p {