Added loading to admin page

front/admin.html

@@ -6,7 +6,8 @@
 	<p>Use this console to edit network-connected devices.  </p>
 
 	<h2>Peers</h2>
-	<table>
+	<p data-bind="hidden:isLoaded">Loading...</p>
+	<table data-bind="visible:isLoaded">
 		<thead><tr>
 			<th>Host</th><th>IPv4</th><th></th>
 		</tr></thead>
@@ -19,7 +20,8 @@
 
 	<h2>Add peer</h2>
 	<p>To add a new peer, type in a hostname and select a user.  The hostname must be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>.  </p>
-	<div>
+	<p data-bind="hidden:isLoaded">Loading...</p>
+	<div data-bind="visible:isLoaded">
 		<input type="text" data-bind="textInput:newPeerHostname,event:{keypress:addPeerKeyPress}" placeholder="phone"></input>
 		<select data-bind="options:users,optionsText:'name',value:newPeerUser,optionsCaption:'(user)'"></select>
 		<button data-bind="click:addPeer,disable:isAddingPeer,text:addPeerText">Add</button>
@@ -28,7 +30,8 @@
 
 	<h2>Add user</h2>
 	<p>To add a new user, type in the user's first device name and a username and click 'add'.  The hostname and username must each be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>.  </p>
-	<div>
+	<p data-bind="hidden:isLoaded">Loading...</p>
+	<div data-bind="visible:isLoaded">
 		<input type="text" data-bind="textInput:newUserHostname,event:{keypress:addUserKeyPress}" placeholder="pc1"></input>
 		<input type="text" data-bind="textInput:newUsername,event:{keypress:addUserKeyPress}" placeholder="joe"></input>
 		<button data-bind="click:addUser,disable:isAddingUser,text:addUserText">Add</button>
@@ -37,7 +40,8 @@
 
 	<h2>Delete User</h2>
 	<p>To delete a user, select the username from the list below and click 'Delete'.  This will delete the user and all their peers.  </p>
-	<div>
+	<p data-bind="hidden:isLoaded">Loading...</p>
+	<div data-bind="visible:isLoaded">
 		<select data-bind="options:users,optionsText:'name',value:userToDelete,optionsCaption:'(user)'"></select>
 		<button data-bind="click:delUser,disable:isDeletingUser,text:deleteUserText">Delete</button>
 	</div>

front/admin.js

@@ -33,6 +33,7 @@ function PeerList() {
 	self.isDeletingUser = ko.observable(false)
 	self.deleteUserText = ko.computed(() => self.isDeletingUser()?'Deleting...':'Delete')
 	self.token = ko.observable('')
+	self.isLoaded = ko.observable(false)
 
 	// Initial loading
 	self.getUsers = async () => {
@@ -67,6 +68,7 @@ function PeerList() {
 				})).map(i=>[i['number'],i])
 			).values()])
 			self.token(user.token)
+			self.isLoaded(true)
 		}
 	}