Show loading spinner before database loaded

html/index.html

@@ -33,7 +33,16 @@
 				<a class="navbar-brand" href=" ">PBS medicine search</a>
 			</div>
 		</nav>
-		<div class="container pt-4">
+		<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 id="app-content" style="display:none">
 				<div>
 					<input class="form-control" id="search-input" placeholder="Search…" autocomplete="off">
 				</div>
@@ -53,6 +62,7 @@
 						</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>
 			</footer>
@@ -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) {