Show loading spinner before database loaded

This commit is contained in:
RunasSudo 2023-01-26 20:03:07 +11:00
parent 013f7d02bd
commit 15989d5a2b
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A

View File

@ -33,7 +33,16 @@
<a class="navbar-brand" href=" ">PBS medicine search</a> <a class="navbar-brand" href=" ">PBS medicine search</a>
</div> </div>
</nav> </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> <div>
<input class="form-control" id="search-input" placeholder="Search…" autocomplete="off"> <input class="form-control" id="search-input" placeholder="Search…" autocomplete="off">
</div> </div>
@ -53,6 +62,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<footer class="border-top pt-4 mt-4"> <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> <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> </footer>
@ -88,6 +98,10 @@
threshold: 2, threshold: 2,
onSelectItem: onClickSearchItem onSelectItem: onClickSearchItem
}); });
// Hide loading spinner
document.getElementById('loading-content').style.display = 'none';
document.getElementById('app-content').style.display = 'block';
} }
function onClickSearchItem(item) { function onClickSearchItem(item) {