Better email template display

.github/copilot-instructions.md

@@ -1,12 +1,11 @@
 GitHub Copilot Instructions for This Repository
 
-If you have any questions, always ask me first.
+Basics:
-
+- If you have any questions, always ask me first!
-Use Svelte 5 runes exclusively
+- Use Svelte 5 runes exclusively
-
+- Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 
-Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 
+- When doing client-side loading, always implement placeholders and loaders, so the UI remains responsive and layout shifts are minimized.
-svelte.dev
+  - Don't use placeholders and loaders for static data like heading etc.
-svelte.dev
 
 Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
 

src/routes/private/events/event/view/+page.svelte

@@ -252,15 +252,25 @@
 <!-- Event Information -->
 <div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
 	{#if loading}
-		<!-- Loading placeholder -->
+		<!-- Loading placeholder with header -->
-		<div class="space-y-4">
+		<div>
-			<div class="h-8 w-1/2 animate-pulse rounded bg-gray-200"></div>
+			<h2 class="mb-4 text-2xl font-semibold text-gray-900">Event Information</h2>
+			<div class="space-y-3">
+				<div class="flex items-center">
+					<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
 					<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
+				</div>
+				<div class="flex items-center">
+					<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
 					<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
+				</div>
+				<div class="flex items-center">
+					<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
 					<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
 				</div>
+			</div>
+		</div>
 	{:else if event}
-		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 		<div>
 			<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
 			<div class="space-y-3">
@@ -299,20 +309,6 @@
 				</div>
 			</div>
 		</div>
-			<div>
-				<h3 class="mb-3 text-lg font-medium text-gray-900">Email Details</h3>
-				<div class="space-y-2">
-					<div>
-						<span class="text-sm font-medium text-gray-500">Subject:</span>
-						<p class="text-sm text-gray-900">{event.email_subject}</p>
-					</div>
-					<div>
-						<span class="text-sm font-medium text-gray-500">Body:</span>
-						<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
-					</div>
-				</div>
-			</div>
-		</div>
 	{:else if error}
 		<div class="py-8 text-center">
 			<p class="text-red-600">{error}</p>
@@ -320,12 +316,53 @@
 	{/if}
 </div>
 
+<!-- Email Template Section -->
+<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
+	<div class="mb-4">
+		<h2 class="text-xl font-semibold text-gray-900">Email Template</h2>
+	</div>
+	
+	{#if loading}
+		<!-- Loading placeholder for email template content -->
+		<div class="space-y-4">
+			<div>
+				<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
+				<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
+			</div>
+			
+			<div>
+				<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
+				<div class="h-28 w-full animate-pulse rounded bg-gray-200"></div>
+			</div>
+		</div>
+	{:else if event}
+
+		<div class="space-y-4">
+			<div>
+				<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
+				<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
+					<p class="text-sm text-gray-900">{event.email_subject}</p>
+				</div>
+			</div>
+			<div>
+				<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
+				<div class="bg-gray-50 p-3 rounded-lg border border-gray-200 max-h-48 overflow-y-auto">
+					<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
+
 <!-- Google Authentication Section -->
 <div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
 	<div class="mb-4 flex items-center justify-between">
 		<h2 class="text-xl font-semibold text-gray-900">Google Account</h2>
 		<p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
 	</div>
+	{#if loading}
+		<div class="h-10 w-48 animate-pulse rounded bg-gray-200"></div>
+	{:else}
 		<GoogleAuthButton 
 			size="small" 
 			variant="secondary"
@@ -337,6 +374,7 @@
 				error = errorMsg;
 			}}
 		/>
+	{/if}
 </div>
 
 <!-- Participants Section -->
@@ -345,7 +383,7 @@
 		<h2 class="text-xl font-semibold text-gray-900">Participants</h2>
 		<button
 			onclick={syncParticipants}
-			disabled={syncingParticipants || !event}
+			disabled={syncingParticipants || !event || loading}
 			class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
 		>
 			{#if syncingParticipants}
@@ -356,7 +394,7 @@
 		</button>
 	</div>
 
-	{#if participantsLoading}
+	{#if participantsLoading || loading}
 		<!-- Loading placeholder for participants -->
 		<div class="space-y-3">
 			{#each Array(5) as _}
@@ -475,12 +513,20 @@
 <div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
 	<div class="mb-4 flex items-center justify-between">
 		<h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
+		{#if !loading}
 			<div class="text-sm text-gray-500">
 				{participants.filter(p => !p.email_sent).length} uncontacted participants
 			</div>
+		{:else}
+			<div class="text-sm text-gray-500">
+				Loading participants...
+			</div>
+		{/if}
 	</div>
 
-	{#if sendingEmails}
+	{#if loading}
+		<div class="h-16 w-full animate-pulse rounded bg-gray-200"></div>
+	{:else if sendingEmails}
 		<div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
 			<div class="flex items-center justify-center">
 				<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">