Use the logo as a loading indicator

Closes #5616

2 files changed, 46 insertions, 1 deletions

diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee
new file mode 100644
index 00000000000..8cd9f865e37
--- /dev/null
+++ b/app/assets/javascripts/logo.js.coffee
@@ -0,0 +1,45 @@
+NProgress.configure(showSpinner: false)
+
+defaultClass = 'tanuki-shape'
+highlightClass = 'highlight'
+pieces = [
+  'path#tanuki-right-cheek',
+  'path#tanuki-right-eye, path#tanuki-right-ear',
+  'path#tanuki-nose',
+  'path#tanuki-left-eye, path#tanuki-left-ear',
+  'path#tanuki-left-cheek',
+]
+timeout = null
+
+clearHighlights = ->
+  $(".#{defaultClass}").attr('class', defaultClass)
+
+start = ->
+  clearHighlights()
+  work(0)
+
+stop = ->
+  window.clearTimeout(timeout)
+  clearHighlights()
+
+work = (pieceIndex) =>
+  # jQuery's addClass won't work on an SVG. Who knew!
+  $piece = $(pieces[pieceIndex])
+  $piece.attr('class', "#{defaultClass} #{highlightClass}")
+
+  timeout = setTimeout(=>
+    $piece.attr('class', defaultClass)
+
+    # If we hit the last piece, reset the index and then reverse the array to
+    # get a nice back-and-forth sweeping look
+    if pieceIndex + 1 >= pieces.length
+      nextIndex = 0
+      pieces.reverse()
+    else
+      nextIndex = pieceIndex + 1
+
+    work(nextIndex)
+  , 200)
+
+$(document).on 'page:fetch',  start
+$(document).on 'page:change', stop
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 458af76cb75..83243dd2457 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -105,7 +105,7 @@
 .tanuki-shape {
   transition: all 0.8s;
 
-  &:hover {
+  &:hover, &.highlight {
     fill: rgb(255, 255, 255);
     transition: all 0.1s;
   }