4 files changed, 38 insertions, 1 deletions
diff --git a/deluge/ui/web/css/deluge.css b/deluge/ui/web/css/deluge.css
index 303a0d1f7..12ad52b5e 100644
--- a/deluge/ui/web/css/deluge.css
+++ b/deluge/ui/web/css/deluge.css
@@ -11,6 +11,36 @@ input {
 	color: Black;
 }
 
+#loading-mask {
+	position: absolute;
+	left:    0;
+	top:     0;
+	width:   100%;
+	height:  100%;
+	z-index: 20000;
+	background-color: white;
+}
+
+#loading {
+	position: absolute;
+	left:    50%;
+	top:     50%;
+	padding: 2px;
+	z-index: 20001;
+	height:  auto;
+	margin:  -35px 0 0 -30px;
+}
+
+#loading .loading-indicator {
+	background: url('../images/loading.gif') no-repeat;
+	color:      #555;
+	font:       24px "UbuntuBeta Regular",Ubuntu,"Bitstream Vera Sans","DejaVu Sans",Tahoma,sans-serif;
+	padding:    2px 42px;
+	margin:     0;
+	text-align: center;
+	height:     auto;
+}
+
 .x-deluge-main-panel {
 	background-image: url('../icons/deluge.png');
 }
diff --git a/deluge/ui/web/images/loading.gif b/deluge/ui/web/images/loading.gif
new file mode 100644
index 000000000..3c2f7c058
--- /dev/null
+++ b/deluge/ui/web/images/loading.gif
diff --git a/deluge/ui/web/index.html b/deluge/ui/web/index.html
index 3b53400be..694c5b843 100644
--- a/deluge/ui/web/index.html
+++ b/deluge/ui/web/index.html
@@ -31,7 +31,12 @@
 		</script>
 	</head>
 	<body>
-		<div style="background-image: url('${base}resources/themes/images/default/tree/loading.gif');"></div>
+		<div id="loading-mask"></div>
+		<div id="loading">
+			<div class="loading-indicator">
+				Loading...
+			</div>
+		</div>
 
 		<!-- Preload icon classes -->
 		<div class="ext-mb-error"></div>
diff --git a/deluge/ui/web/js/deluge-all/UI.js b/deluge/ui/web/js/deluge-all/UI.js
index bab33294e..d7c710516 100644
--- a/deluge/ui/web/js/deluge-all/UI.js
+++ b/deluge/ui/web/js/deluge-all/UI.js
@@ -99,6 +99,8 @@ deluge.ui = {
 
         deluge.client.on('connected', function(e) {
             deluge.login.show();
+            Ext.get('loading').remove();
+            Ext.get('loading-mask').fadeOut({remove:true});
         }, this, {single: true});
 
         this.update = Ext.bind(this.update, this);