diff --git a/awx/ui/static/js/controllers/JobDetail.js b/awx/ui/static/js/controllers/JobDetail.js
index 8b1d233bee..26116c5da8 100644
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/awx/ui/static/js/controllers/JobDetail.js
@@ -33,6 +33,12 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.tasksMaxRows = 200;
     scope.playsMaxRows = 200;
 
+    // Set the following to true when 'Loading...' message desired
+    scope.playsLoading = true;
+    scope.tasksLoading = true;
+    scope.hostResultsLoading = true;
+    scope.hostSummariesLoading = true;
+
     scope.liveEventProcessing = true;     // true while job is active and live events are arriving
     scope.pauseLiveEvents = false;        // control play/pause state of event processing
 
@@ -137,6 +143,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.removeInitialLoadComplete = scope.$on('InitialLoadComplete', function() {
         var url;
         Wait('stop');
+
         if (JobIsFinished(scope)) {
             scope.liveEventProcessing = false; // signal that event processing is over and endless scroll
             scope.pauseLiveEvents = false;      // should be enabled
@@ -529,6 +536,12 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.removeLoadJobRow = scope.$on('LoadJob', function() {
         Wait('start');
         scope.job_status = {};
+
+        scope.playsLoading = true;
+        scope.tasksLoading = true;
+        scope.hostResultsLoading = true;
+        scope.LoadHostSummaries = true;
+
         // Load the job record
         Rest.setUrl(GetBasePath('jobs') + job_id + '/');
         Rest.get()
@@ -939,6 +952,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         // check for more plays when user scrolls to bottom of play list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_plays) {
             $('#playsMoreRows').fadeIn();
+            scope.playsLoading = true;
             Rest.setUrl(scope.next_plays);
             Rest.get()
                 .success( function(data) {
@@ -989,6 +1003,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                         skipped = (event.skipped_count) ? event.skipped_count : 0;
 
                         scope.plays[scope.plays.length - 1].hostCount = ok + changed + failed + skipped;
+                        scope.playsLoading = false;
                     });
                     $('#playsMoreRows').fadeOut(400);
                 })
@@ -1003,6 +1018,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         // check for more tasks when user scrolls to bottom of task list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_tasks) {
             $('#tasksMoreRows').fadeIn();
+            scope.tasksLoading = true;
             Rest.setUrl(scope.next_tasks);
             Rest.get()
                 .success(function(data) {
@@ -1060,6 +1076,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                         });
                     });
                     $('#tasksMoreRows').fadeOut(400);
+                    scope.tasksLoading = false;
                 })
                 .error(function(data, status) {
                     $('#tasksMoreRows').fadeOut(400);
@@ -1073,6 +1090,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         // check for more hosts when user scrolls to bottom of host results list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_host_results) {
             $('#hostResultsMoreRows').fadeIn();
+            scope.hostResultsLoading = true;
             Rest.setUrl(scope.next_host_results);
             Rest.get()
                 .success(function(data) {
@@ -1121,6 +1139,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                             msg: (row.event_data && row.event_data.res) ? row.event_data.res.msg : '',
                             item: item
                         });
+                        scope.hostResultsLoading = false;
                     });
                     $('#hostResultsMoreRows').fadeOut(400);
                 })
@@ -1135,6 +1154,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
     scope.hostSummariesScrollDown = function() {
         // check for more hosts when user scrolls to bottom of host summaries list...
         if (((!scope.liveEventProcessing) || (scope.liveEventProcessing && scope.pauseLiveEvents)) && scope.next_host_summaries) {
+            scope.hostSummariesLoading = true;
             Rest.setUrl(scope.next_host_summaries);
             Rest.get()
                 .success(function(data) {
@@ -1157,6 +1177,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                         });
                     });
                     $('#hostSummariesMoreRows').fadeOut();
+                    scope.hostSummariesLoading = false;
                 })
                 .error(function(data, status) {
                     $('#hostSummariesMoreRows').fadeOut();
diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js
index 4607dcc81e..d60afc7347 100644
--- a/awx/ui/static/js/helpers/JobDetail.js
+++ b/awx/ui/static/js/helpers/JobDetail.js
@@ -665,7 +665,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
         url = scope.job.url + 'job_plays/?page_size=' + scope.playsMaxRows + '&order_by=id';
         url += (scope.search_play_name) ? '&play__icontains=' + scope.search_play_name : '';
         url += (scope.search_play_status === 'failed') ? '&failed=true' : '';
-
+        scope.playsLoading = true;
         Rest.setUrl(url);
         Rest.get()
             .success(function(data) {
@@ -717,6 +717,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                     id: (scope.plays.length > 0) ? scope.plays[0].id : null,
                     callback: callback
                 });
+                scope.playsLoading = false;
             })
             .error(function(data) {
                 ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -774,6 +775,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                 return true;
             });
 
+            scope.tasksLoading = true;
+
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
@@ -852,6 +855,8 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                         callback: callback
                     });
 
+                    scope.tasksLoading = false;
+
                 })
                 .error(function(data) {
                     ProcessErrors(scope, data, status, null, { hdr: 'Error!',
@@ -909,7 +914,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
             url += (scope.search_host_name) ? 'host__name__icontains=' + scope.search_host_name + '&' : '';
             url += (scope.search_host_status === 'failed') ? 'failed=true&' : '';
             url += 'event__startswith=runner&page_size=' + scope.hostResultsMaxRows + '&order_by=host__name';
-
+            scope.hostResultsLoading = true;
             Rest.setUrl(url);
             Rest.get()
                 .success(function(data) {
@@ -963,6 +968,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                                 item: item
                             });
                         }
+                        scope.hostResultsLoading = false;
                     });
                     if (callback) {
                         scope.$emit(callback);
@@ -995,6 +1001,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
         url += '&page_size=' + scope.hostSummariesMaxRows + '&order_by=host_name';
 
         scope.hosts = [];
+        scope.hostSummariesLoading = true;
 
         Rest.setUrl(url);
         Rest.get()
@@ -1017,6 +1024,7 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
                         failed: event.failures,
                         status: (event.failed) ? 'failed' : 'successful'
                     });
+                    scope.hostSummariesLoading = false;
                 });
                 if (callback) {
                     scope.$emit(callback);
@@ -1399,6 +1407,13 @@ function($rootScope, $log, UpdatePlayStatus, UpdateHostStatus, AddHostResult, Ge
 
         DrawHostSummaries({ scope: scope });
 
+        setTimeout(function() {
+            scope.playsLoading = false;
+            scope.tasksLoading = false;
+            scope.hostResultsLoading = false;
+            scope.LoadHostSummaries = false;
+        },100);
+
         if (scope.host_summary.total > 0) {
             DrawGraph({ scope: scope, resize: true });
         }
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index a951dd2ca8..f2ace757ea 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -178,7 +178,10 @@
                                             <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ play.status_tip }}" data-tip-watch="play.status_tip" data-placement="top"><i class="fa icon-job-{{ play.status }}"></i></td>
                                             <td class="col-lg-7 col-md-6 col-sm-6 col-xs-4">{{ play.name }}</td>
                                         </tr>
-                                        <tr ng-show="plays.length === 0">
+                                        <tr ng-show="plays.length === 0 && playsLoading">
+                                            <td colspan="4" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="plays.length === 0 && !playsLoading">
                                             <td colspan="4" class="col-lg-12 loading-info">No matching plays</td>
                                         </tr>
                                     </tbody>
@@ -239,7 +242,10 @@
                                             <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4" id="">{{ task.name }}</td>
                                             <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
                                         </tr>
-                                        <tr ng-show="taskList.length === 0">
+                                        <tr ng-show="taskList.length === 0 && tasksLoading">
+                                            <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="taskList.length === 0 && !tasksLoading">
                                             <td colspan="5" class="col-lg-12 loading-info">No matching tasks</td>
                                         </tr>
                                     </tbody>
@@ -298,7 +304,10 @@
                                             <td class="col-lg-4 col-md-4 col-sm-3 col-xs-3">{{ result.msg }}</td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="result.host_id" href="" ng-click="editHost(result.host_id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
-                                        <tr ng-show="results.length === 0">
+                                        <tr ng-show="results.length === 0 && hostResultsLoading">
+                                            <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="results.length === 0 && !hostResultsLoading">
                                             <td colspan="5" class="col-lg-12 loading-info">No matching hosts</td>
                                         </tr>
                                     </tbody>
@@ -375,7 +384,10 @@
                                                 <a href="" ng-click="hostEventsViewer(host.id, host.name, 'failed')" aw-tool-tip="Failed" data-placement="top" ng-hide="host.failed == 0"><span class="badge failed-hosts">{{ host.failed }}</span></a></td>
                                             <td class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-show="host.id" href="" ng-click="editHost(host.id)" aw-tool-tip="Edit host" data-placement="top"><i class="fa fa-pencil"></i></a></td>
                                         </tr>
-                                        <tr ng-show="summaryList.length === 0">
+                                        <tr ng-show="summaryList.length === 0 && hostSummariesLoading">
+                                            <td colspan="5" class="col-lg-12 loading-info">Loading...</td>
+                                        </tr>
+                                        <tr ng-show="summaryList.length === 0 && !hostSummariesLoading">
                                             <td colspan="2" class="col-lg-12 loading-info">No matching hosts</td>
                                         </tr>
                                     </tbody>