From 15989d5a2b1ef631bc0282b98b2870e130394db6 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Thu, 26 Jan 2023 20:03:07 +1100
Subject: [PATCH] Show loading spinner before database loaded

---
 html/index.html | 50 +++++++++++++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/html/index.html b/html/index.html
index f9e10f7..4345e96 100644
--- a/html/index.html
+++ b/html/index.html
@@ -33,25 +33,35 @@
 				<a class="navbar-brand" href=" ">PBS medicine search</a>
 			</div>
 		</nav>
-		<div class="container pt-4">
-			<div>
-				<input class="form-control" id="search-input" placeholder="Search…" autocomplete="off">
+		<div class="container pt-4" id="loading-page">
+			<div class="text-center" id="loading-content">
+				<div class="spinner-border" role="status">
+					<span class="visually-hidden">Loading...</span>
+				</div>
+				<div class="mt-2">
+					Loading…
+				</div>
 			</div>
-			<div>
-				<table id="search-results" class="table mt-2">
-					<thead>
-						<tr>
-							<th class="col-1">Item code</th>
-							<th class="col-8">Drug</th>
-							<th class="col-1">Quantity</th>
-							<th class="col-1">Repeats</th>
-							<th class="col-1">Restriction</th>
-						</tr>
-					</thead>
-					<tbody>
-						<td colspan="5" class="text-center">Enter a search term above to show results</th>
-					</tbody>
-				</table>
+			<div id="app-content" style="display:none">
+				<div>
+					<input class="form-control" id="search-input" placeholder="Search…" autocomplete="off">
+				</div>
+				<div>
+					<table id="search-results" class="table mt-2">
+						<thead>
+							<tr>
+								<th class="col-1">Item code</th>
+								<th class="col-8">Drug</th>
+								<th class="col-1">Quantity</th>
+								<th class="col-1">Repeats</th>
+								<th class="col-1">Restriction</th>
+							</tr>
+						</thead>
+						<tbody>
+							<td colspan="5" class="text-center">Enter a search term above to show results</th>
+						</tbody>
+					</table>
+				</div>
 			</div>
 			<footer class="border-top pt-4 mt-4">
 				<p class="text-muted">Results sourced from the PBS database as at January 2023. This tool is made available in the hope that it will be useful, but <b>WITHOUT ANY WARRANTY</b>; without even the implied warranty of <b>MERCHANTABILITY</b> or <b>FITNESS FOR A PARTICULAR PURPOSE</b>. Information provided in this tool is intended for reference by medical professionals. Nothing in this tool is intended to constitute medical advice.</p>
@@ -88,6 +98,10 @@
 					threshold: 2,
 					onSelectItem: onClickSearchItem
 				});
+				
+				// Hide loading spinner
+				document.getElementById('loading-content').style.display = 'none';
+				document.getElementById('app-content').style.display = 'block';
 			}
 			
 			function onClickSearchItem(item) {