Add a loading spinner to our main nav; fixes #378

app/assets/javascripts/nav_spinners.js

@@ -0,0 +1,13 @@
+// add a spinner to our navlinks when turbolinks:click is triggered
+$(document).on('turbolinks:click', function(event){
+  var $target = $(event.target);
+
+  if ($target.is('#mainnav .nav-link')) {
+    $target.append('<div class="flex-center nav-spinner"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>');
+  }
+});
+
+// remove the spinner after the new page loads (or is being written to the cache)
+$(document).on('turbolinks:load turbolinks:before-cache', function(){
+  $('#mainnav .nav-spinner').remove();
+});

app/assets/stylesheets/application.scss

@@ -16,3 +16,4 @@
 @import 'modules/icons';
 @import 'modules/checkouts';
 @import 'modules/requests';
+@import 'modules/nav_spinner';

app/assets/stylesheets/modules/nav_spinner.scss

@@ -0,0 +1,5 @@
+.nav-spinner {
+  height: 2rem;
+  margin-top: -3rem;
+  margin-bottom: 1rem;
+}