improve loading feedback

src/routes/insights/+page.svelte

@@ -80,7 +80,12 @@
 </svelte:head>
 
 {#if isLoading}
-	<div in:fade class="text-center py-6 text-gray-500 dark:text-gray-300">Loading...</div>
+	<div in:fade class="flex justify-center items-center py-10">
+		<svg class="animate-spin h-8 w-8 text-blue-500 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+			<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+			<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+		</svg>
+	</div>
 {:else}
 	<div in:fade class="space-y-6">
 		<div class="flex justify-end mb-4">

src/routes/login/+page.svelte

@@ -124,10 +124,18 @@
 				<!-- Buttons -->
 				<button
 					type="submit"
-					class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition"
+					class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition flex justify-center items-center gap-2"
 					disabled={isDisabled}
 				>
-					Login
+					{#if isDisabled}
+						<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+						</svg>
+						<span>Logging in...</span>
+					{:else}
+						<span>Login</span>
+					{/if}
 				</button>
 
 				<button

src/routes/portfolio/+page.svelte

@@ -298,7 +298,12 @@
 </svelte:head>
 
 {#if isLoading}
-	<div in:fade class="text-center py-6 text-gray-500 dark:text-gray-300">Loading...</div>
+	<div in:fade class="flex justify-center items-center py-10">
+		<svg class="animate-spin h-8 w-8 text-blue-500 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+			<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+			<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+		</svg>
+	</div>
 {:else if portfolioId}
 	<div class="flex flex-wrap gap-4 mb-6 items-center">
 		<button

src/routes/stocks/+page.svelte

@@ -77,7 +77,12 @@
 </svelte:head>
 
 {#if isLoading}
-	<div in:fade class="text-center text-gray-600 dark:text-gray-300 py-8">Loading...</div>
+	<div in:fade class="flex justify-center items-center py-10">
+		<svg class="animate-spin h-8 w-8 text-blue-500 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+			<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+			<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+		</svg>
+	</div>
 {:else}
 	<!-- Filter Input -->
 	<div class="mx-auto my-4 w-11/12 max-w-3xl px-4 py-4 bg-gradient-to-r from-gray-50 to-white dark:from-gray-800 dark:to-gray-900 shadow-md rounded-xl">