Add a spinner to the dialog when loading the iframe so that it's not

just a blank dialog.  Create separate CSS for dialog vs. frame.
Don't show the Loading message for the first load.

5 files changed, 35 insertions, 9 deletions

diff --git a/modules/organize/css/organize_dialog.css b/modules/organize/css/organize_dialog.css
new file mode 100644
index 00000000..2b39cdf4
--- /dev/null
+++ b/modules/organize/css/organize_dialog.css
@@ -0,0 +1,17 @@
+#g-organize-frame {
+  border: 0px;
+  width: 100%;
+  height: 100%;
+}
+
+#g-organize-app-loading {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  background-image: url(../vendor/ext/images/default/tree/loading.gif);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize_frame.css
index 3f7ce8f6..3f7ce8f6 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize_frame.css
diff --git a/modules/organize/vendor/ext/images/default/tree/leaf.gif b/modules/organize/vendor/ext/images/default/tree/leaf.gif
deleted file mode 100644
index 445769d3..00000000
--- a/modules/organize/vendor/ext/images/default/tree/leaf.gif
+++ /dev/null
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 7bff576d..a386fa77 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -1,11 +1,5 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<style>
-  #g-organize-frame {
-    border: 0px;
-    width: 100%;
-    height: 100%;
-  }
-</style>
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize_dialog.css") ?>" />
 <script type="text/javascript">
   var ORGANIZE_TITLE =
     <?= t("Organize :: %album_title", array("album_title" => "__TITLE__"))->for_js() ?>;
@@ -18,6 +12,12 @@
     $("#g-dialog").dialog("option", "title", ORGANIZE_TITLE.replace("__TITLE__", title));
   }
   set_title("<?= $album->title ?>");
+
+  var done_loading = function() {
+    $("#g-organize-app-loading").hide();
+  }
 </script>
+<div id="g-organize-app-loading">&nbsp;</div>
 <iframe id="g-organize-frame" src="<?= url::site("organize/frame/{$album->id}") ?>">
 </iframe>
+
diff --git a/modules/organize/views/organize_frame.html.php b/modules/organize/views/organize_frame.html.php
index 16f78603..cdbf3be7 100644
--- a/modules/organize/views/organize_frame.html.php
+++ b/modules/organize/views/organize_frame.html.php
@@ -1,7 +1,7 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ext-all.css") ?>" />
 <link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/vendor/ext/css/ux-all.css") ?>" />
-<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize.css") ?>" />
+<link rel="stylesheet" type="text/css" href="<?= url::file("modules/organize/css/organize_frame.css") ?>" />
 <style type="text/css">
   .g-organize div.thumb-album div.icon {
     background-image: url(<?= url::file("modules/organize/vendor/ext/images/default/tree/folder.gif") ?>);
@@ -26,6 +26,11 @@
       thumb_data_view.el.unmask();
     }
 
+    // Notify the parent dialog that the ExtJS app is loaded
+    if (parent.done_loading) {
+      parent.done_loading();
+    }
+
     var show_generic_error = function() {
       stop_busy();
       Ext.Msg.alert(
@@ -34,7 +39,11 @@
 
     var current_album_id = null;
     var load_album_data = function(id) {
-      start_busy(<?= t("Loading...")->for_js() ?>);
+      if (current_album_id) {
+        // Don't show the loading message on the initial load, it
+        // feels a little jarring.
+        start_busy(<?= t("Loading...")->for_js() ?>);
+      }
       Ext.Ajax.request({
         url: '<?= url::site("organize/album_info/__ID__") ?>'.replace("__ID__", id),
         success: function(xhr, opts) {