VRFS-2095 add orange spinner to Find Session screen

web/app/assets/javascripts/findSession.js

@@ -22,9 +22,12 @@
 
     var currentActiveSessionsQuery = defaultActiveSessionsQuery();
 
+    var $asSpinner = null;
+
     var $ssNext = null;
     var $ssScroller = null;
     var $ssNoMoreEntries = null;
+    var $ssSpinner = null;
     var currentScheduledSessionsPage = 0;
     var currentScheduledSessionsQuery = defaultScheduledSessionsQuery();
 
@@ -32,15 +35,6 @@
       return CATEGORY;
     }
 
-    function removeSpinner($selector) {
-      $('div[layout-id=findSession] .content .spinner').remove();// remove any existing spinners
-    }
-
-    function addSpinner($selector) {
-      removeSpinner();
-      $selector.append('<div class="spinner spinner-large"></div>')
-    }
-
     function search() {
       logger.debug("Searching for sessions...");
       clearResults();
@@ -50,8 +44,8 @@
     }
 
     function loadSessions() {
-      addSpinner($('#sessions-active'));
-      addSpinner($('#sessions-scheduled'));
+      $asSpinner.show();
+      $ssSpinner.show();
 
       // get active sessions
       rest.findActiveSessions(currentActiveSessionsQuery)
@@ -67,7 +61,7 @@
           }
         })
         .always(function() {
-          removeSpinner($('#sessions-active'));
+          $asSpinner.hide();
         });
 
       // get scheduled sessions
@@ -84,7 +78,7 @@
           }
         })
         .always(function() {
-          removeSpinner($('#sessions-scheduled'));
+          $ssSpinner.hide();
         });
     }
 
@@ -205,16 +199,6 @@
     }
 
     function afterLoadScheduledSessions(sessionList) {
-      var $noSessionsMsgSelector = $('#no-scheduled-sessions');
-      
-      if (sessionList.length === 0 && currentScheduledSessionsPage === 0) {
-        $(CATEGORY.SCHEDULED.id).hide();
-        $noSessionsMsgSelector.show();
-      }
-      else {
-        $(CATEGORY.SCHEDULED.id).show();
-        $noSessionsMsgSelector.hide();
-      }
 
       if(sessionList.length < SCHEDULED_SESSIONS_LIMIT) {
         // if we retrieve less results than asked for, end searching
@@ -310,7 +294,10 @@
       $screen = $('#findSession');
       $ssNext = $screen.find('#sessions-scheduled .btn-next')
       $ssScroller = $screen.find('.content-body-scroller');
-      $ssNoMoreEntries = $screen.find('#end-of-ss-list')
+      $ssNoMoreEntries = $screen.find('#end-of-ss-list');
+      $ssSpinner = $screen.find('#sessions-scheduled .paginate-wait');
+
+      $asSpinner = $screen.find('#sessions-active .paginate-wait');
 
       $dateFilter.datepicker({
           dateFormat: "D d MM yy",

web/app/assets/stylesheets/client/findSession.css.scss

@@ -2,6 +2,17 @@
 
 #findSession {
 
+  .paginate-wait {
+    margin:auto;
+    text-align:center;
+    vertical-align:bottom;
+    line-height:32px;
+    .spinner-small {
+      display:inline-block;
+      vertical-align:top;
+    }
+  }
+
   th, td { margin: 4px; padding:4px; }
 
   .content .spinner {

web/app/views/clients/_findSession.html.erb

@@ -51,17 +51,16 @@
               <div id="sessions-active" class="session-container">
                 <%= render :partial => "sessionList", :locals => {:title => "current, active sessions", :category => "sessions-active"} %>
                 <br />
+                <div class="paginate-wait">Fetching results...<div class="spinner-small"></div></div>
                 <div id="no-active-sessions">
-                  No active public sessions found.
+                  No more active public sessions found.
                 </div>
               </div>
               <br />
               <div id="sessions-scheduled" class="session-container">
                 <%= render :partial => "sessionList", :locals => {:title => "future, scheduled sessions", :category => "sessions-scheduled"} %>
                 <br />
-                <div id="no-scheduled-sessions">
-                  No scheduled sessions found.
-                </div>
+                <div class="paginate-wait">Fetching results...<div class="spinner-small"></div></div>
                 <div id="end-of-ss-list" class="end-of-list">
                   No more scheduled sessions.
                 </div>