Now the last thing we're going to do is update the button text while the process is occurring. To get that done over inside of Atom we're going to use that text method we've used in the past.

In the locationButton.attr line, we're going to set the text property equal to, by calling text, Sending location.... Now, in the index.js file, the real button text is Send Location, I'm going to go ahead and lowercase location that to keep things uniform:

var locationButton = jQuery('#send-location');
locationButton.on('click', function (){
  if (!navigator.geolocation){
    return alert('Geolocation not supported by your browser.');
  }
  locationButton.attr('disabled', 'disabled').text('Sending location...');

Now that we have this set up we are updating the text while the process occurs, the only thing left to do is tweak it back to its original value next by setting text equal to the string Send location, and we're going to do the exact same thing in error handler, calling text passing in the string Send location:

locationButton.attr('disabled', 'disabled').text('Sending location...'); 
 
navigator.geolocation.getCurrentPosition(function (position){ 
  locationButton.removeAttr('disabled').text('Send location'); 
  socket.emit('createLocationMessage', { 
    latitude: position.coords.latitude, 
    longitude: position.coords.longitude 
  }); 
}, function(){ 
    locationButton.removeAttr('disabled').text('Send location'); 
    alert('Unable to fetch location'); 
}); 

Now we can go ahead and test that this is working as expected, both of these lines (in success as well as error handler) are identical, regardless of whether it succeeds or fails we're going to do the same thing.

Over inside of Chrome I'm going to give my page a refresh one more time, we're going to click that Send Location button and you can see the button is disabled and the text was changed, Sending location... shows up:

And as soon as the process is complete and the location was actually sent, the button returns to its default state.

With this in place we now have a much nicer user experience than we had previously. Not only do we have a nice set of styles, we also have a better UI for our form and the Send location button. That is where we are going to stop for this section.

Let's go ahead and make a quick commit by shutting down the server, running git status, running git add . to add all of those files, and finally we're going to go ahead and run git commit with the -m flag providing a message, Add css for chat page:

git commit -m 'Add css for chat page'

We can go ahead and push this up to GitHub using git push and I'm going to avoid deploying for Heroku as of now, although you are welcome to deploy and test your application live.