buy: loading spinner

ts/buy.ts

@@ -23,10 +23,18 @@ document.querySelector('#fetch')!.addEventListener('click', async () => {
 	const cx = (document.querySelector('#cx') as HTMLInputElement).value;
 	if (!(cx in warehouseNames))
 		throw new Error(`invalid CX ${cx}`);
-	const output = await calculate(username.value, apiKey.value, supplyForDays, cx as keyof typeof warehouseNames);
-	console.log(output);
-	localStorage.setItem('fio-username', username.value);
-	localStorage.setItem('fio-api-key', apiKey.value);
+	const loader = document.querySelector('#loader') as HTMLElement;
+	loader.innerHTML = '';
+	loader.style.display = 'block';
+	try {
+		const output = await calculate(username.value, apiKey.value, supplyForDays, cx as keyof typeof warehouseNames);
+		console.log(output);
+		localStorage.setItem('fio-username', username.value);
+		localStorage.setItem('fio-api-key', apiKey.value);
+	} catch (e) {
+		console.error(e);
+	}
+	loader.style.display = 'none';
 });
 document.querySelector('#copy-xit-act')!.addEventListener('click', () => {
 	navigator.clipboard.writeText(xitAct.value);
@@ -34,6 +42,9 @@ document.querySelector('#copy-xit-act')!.addEventListener('click', () => {
 setupPopover();
 
 async function calculate(username: string, apiKey: string, supplyForDays: number, cx: keyof typeof warehouseNames): Promise<void> {
+	const tbody = document.querySelector('tbody')!;
+	tbody.innerHTML = '';
+
 	const prices = await getPrices(cx);
 	const planets = await getPlanets(username, apiKey);
 	const avail = await warehouseInventory(username, apiKey, warehouseNames[cx]);
@@ -72,8 +83,6 @@ async function calculate(username: string, apiKey: string, supplyForDays: number
 
 	const toBuy: Record<string, number> = {};
 	const priceLimits: Record<string, number> = {};
-	const tbody = document.querySelector('tbody')!;
-	tbody.innerHTML = '';
 	const format = new Intl.NumberFormat(undefined, {maximumFractionDigits: 0}).format;
 	for (const m of materials) {
 		const tr = document.createElement('tr');

www/buy.html

@@ -37,6 +37,7 @@
 			</thead>
 			<tbody></tbody>
 		</table>
+		<section id="loader"></section>
 		<section class="xit-act">
 			<textarea id="xit-act" readonly></textarea>
 			<input type="button" value="copy" id="copy-xit-act">

www/style.css

@@ -99,6 +99,50 @@ main.buy section.xit-act {
 	}
 }
 
+#loader {
+	display: none;
+	width: 48px;
+	height: 48px;
+	margin: 0 auto;
+	border-radius: 50%;
+	position: relative;
+	border: 3px solid;
+	border-color: #ccc #ccc transparent transparent;
+	animation: rotation 1s linear infinite;
+}
+#loader::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	border: 3px solid;
+	border-color: transparent transparent #c8c #c8c;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	animation: rotationBack 0.5s linear infinite;
+	transform-origin: center center;
+}
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+@keyframes rotationBack {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(-360deg);
+	}
+}
+
 *[data-tooltip] {
 	text-decoration: underline dashed;
 	cursor: help;