add loading spinner for stock/code page

src/routes/stocks/[code]/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { page } from '$app/stores';
+	import { fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
 	import { getRequest } from '../../../utils/api.js';
 	import StockPriceHistory from '../../../components/StockPriceHistory.svelte';
@@ -62,7 +63,18 @@
 </svelte:head>
 
 {#if !stockInfo}
-	<div class="text-center py-8 text-lg text-gray-500 dark:text-gray-400">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
 		class="w-full bg-white dark:bg-gray-900 rounded-xl shadow-md p-6 box-border transition-all duration-300 max-w-6xl mx-auto mt-6"
@@ -85,7 +97,7 @@
 			>
 				<span class="text-gray-600 dark:text-gray-300 font-medium text-base">Code:</span>
 				<span class="text-emerald-600 dark:text-emerald-400 font-semibold text-lg"
-					>{stockInfo.code}</span
+				>{stockInfo.code}</span
 				>
 			</div>
 
@@ -94,7 +106,7 @@
 			>
 				<span class="text-gray-600 dark:text-gray-300 font-medium text-base">Name:</span>
 				<span class="text-emerald-600 dark:text-emerald-400 font-semibold text-lg"
-					>{stockInfo.name}</span
+				>{stockInfo.name}</span
 				>
 			</div>
 
@@ -121,7 +133,7 @@
 			>
 				<span class="text-gray-600 dark:text-gray-300 font-medium text-base">IPO:</span>
 				<span class="text-emerald-600 dark:text-emerald-400 font-semibold text-lg"
-					>{stockInfo.ipo ?? 'N/A'}</span
+				>{stockInfo.ipo ?? 'N/A'}</span
 				>
 			</div>