diff --git a/src/main/webdemo/index.html b/src/main/webdemo/index.html
index 0f82d4cefb..f931899ce1 100644
--- a/src/main/webdemo/index.html
+++ b/src/main/webdemo/index.html
@@ -18,6 +18,9 @@
     <span class="header item"><a href="#/">Home</a></span>
 </div>
 <div class="ui container">
+    <div id="loading" class="ui modal">
+        <div class="ui text loader">Loading</div>
+    </div>
     <div ng-view></div>
 </div>
 </body>
diff --git a/src/main/webdemo/js/controllers/CreateDeal.js b/src/main/webdemo/js/controllers/CreateDeal.js
index 1df3fabcf9..73bbd7f7b0 100644
--- a/src/main/webdemo/js/controllers/CreateDeal.js
+++ b/src/main/webdemo/js/controllers/CreateDeal.js
@@ -8,8 +8,8 @@ define([
     'Deal'
 ], (angular, maskedInput, semantic, nodeApi, Deal) => {
     angular.module('irsViewer').controller('CreateDealController', function CreateDealController($http, $scope, $location, nodeService) {
-        semantic.init();
-        $scope.isLoading = nodeService.isLoading;
+        semantic.init($scope, nodeService.isLoading);
+
         $scope.deal = nodeService.newDeal();
         $scope.createDeal = () => {
             nodeService.createDeal(new Deal($scope.deal))
diff --git a/src/main/webdemo/js/controllers/Deal.js b/src/main/webdemo/js/controllers/Deal.js
index df8f01bced..6bb8d5cdad 100644
--- a/src/main/webdemo/js/controllers/Deal.js
+++ b/src/main/webdemo/js/controllers/Deal.js
@@ -2,9 +2,7 @@
 
 define(['angular', 'utils/semantic', 'services/NodeApi'], (angular, semantic, nodeApi) => {
     angular.module('irsViewer').controller('DealController', function DealController($http, $scope, $routeParams, nodeService) {
-        semantic.init();
-
-        $scope.isLoading = nodeService.isLoading;
+        semantic.init($scope, nodeService.isLoading);
 
         nodeService.getDeal($routeParams.dealId).then((deal) => $scope.deal = deal);
     });
diff --git a/src/main/webdemo/js/controllers/Home.js b/src/main/webdemo/js/controllers/Home.js
index 3ea4186f2b..70542afb5b 100644
--- a/src/main/webdemo/js/controllers/Home.js
+++ b/src/main/webdemo/js/controllers/Home.js
@@ -1,12 +1,13 @@
 'use strict';
 
-define(['angular', 'services/NodeApi'], (angular, nodeApi) => {
+define(['angular', 'utils/semantic', 'services/NodeApi'], (angular, semantic, nodeApi) => {
     angular.module('irsViewer').controller('HomeController', function HomeController($http, $scope, nodeService) {
+        semantic.addLoadingModal($scope, nodeService.isLoading);
+
         let handleHttpFail = (resp) => {
             $scope.httpError = resp.data
         }
 
-        $scope.isLoading = nodeService.isLoading;
         $scope.infoMsg = "";
         $scope.errorText = "";
         $scope.date = { "year": "...", "month": "...", "day": "..." };
diff --git a/src/main/webdemo/js/services/NodeApi.js b/src/main/webdemo/js/services/NodeApi.js
index a11de4a2ce..e648034a72 100644
--- a/src/main/webdemo/js/services/NodeApi.js
+++ b/src/main/webdemo/js/services/NodeApi.js
@@ -76,6 +76,7 @@ define(['angular', 'lodash'], (angular, _) => {
             }
 
             this.isLoading = () => {
+                console.log("IS LOADING");
                 return _.reduce(Object.keys(curLoading), (last, key) => {
                     return (last || curLoading[key]);
                 }, false);
diff --git a/src/main/webdemo/js/utils/semantic.js b/src/main/webdemo/js/utils/semantic.js
index 2a90ff44e7..c4874f922b 100644
--- a/src/main/webdemo/js/utils/semantic.js
+++ b/src/main/webdemo/js/utils/semantic.js
@@ -2,10 +2,21 @@
 
 define(['jquery', 'semantic'], ($, semantic) => {
     return {
-        init: () => {
+        init: function($scope, loadingFunc) {
             $('.ui.accordion').accordion();
             $('.ui.dropdown').dropdown();
             $('.ui.sticky').sticky();
+
+            this.addLoadingModal($scope, loadingFunc);
+        },
+        addLoadingModal: ($scope, loadingFunc) => {
+            $scope.$watch(loadingFunc, (newVal) => {
+                if(newVal === true) {
+                    $('#loading').modal('setting', 'closable', false).modal('show');
+                } else {
+                    $('#loading').modal('hide');
+                }
+            });
         }
     };
 });
\ No newline at end of file
diff --git a/src/main/webdemo/view/create-deal.html b/src/main/webdemo/view/create-deal.html
index 9c7a21d95f..14302eedd9 100644
--- a/src/main/webdemo/view/create-deal.html
+++ b/src/main/webdemo/view/create-deal.html
@@ -1,8 +1,5 @@
 <div class="ui container">
     <div class="ui negative message" id="form-error" ng-show="formError">{{formError}}</div>
-    <div class="ui active dimmer" ng-show="isLoading()">
-        <div class="ui text loader">Loading</div>
-    </div>
     <h2>New Deal</h2>
     <form id="deal-form" class="ui form" ng-submit="createDeal()">
         <div id="irscolumns" class="ui grid">
diff --git a/src/main/webdemo/view/deal.html b/src/main/webdemo/view/deal.html
index c60137871e..7fab800592 100644
--- a/src/main/webdemo/view/deal.html
+++ b/src/main/webdemo/view/deal.html
@@ -1,11 +1,4 @@
 <div class="ui container">
-    <div class="ui active dimmer" ng-show="isLoading()">
-        <div class="ui text loader">Loading</div>
-    </div>
-    <!-- Todo: Deals should have common data at the top and interchangable green/red
-       buyer and seller -->
-    <!-- All fields of the deal can be found from the JSON returned by the IRS demo API.
-    All fields can be represented in some way -->
     <div class="ui grid">
         <div class="sixteen wide column" id="common">
             <table class="ui striped table">