From bf4b80996aad0f280c1501bf37129464c3285390 Mon Sep 17 00:00:00 2001
From: Paul Driver <frodwith@gmail.com>
Date: Wed, 6 Oct 2010 09:52:41 -0700
Subject: [PATCH] Added loading divs so we don't a half-rendered ui

---
 lib/WebGUI/Fork/ProgressBar.pm  | 13 ++++++++++---
 lib/WebGUI/Fork/ProgressTree.pm | 17 ++++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/lib/WebGUI/Fork/ProgressBar.pm b/lib/WebGUI/Fork/ProgressBar.pm
index 312ddc299..0c0b544a4 100644
--- a/lib/WebGUI/Fork/ProgressBar.pm
+++ b/lib/WebGUI/Fork/ProgressBar.pm
@@ -37,9 +37,12 @@ use HTML::Entities;
 use JSON;
 
 my $template = <<'TEMPLATE';
-<p id='message'></p>
-<div id='meter'></div>
-<p>Time elapsed: <span id='elapsed'></span> seconds.</p>
+<div id='loading'>Loading...</div>
+<div id='ui' style='display: none'>
+    <p id='message'></p>
+    <div id='meter'></div>
+    <p>Time elapsed: <span id='elapsed'></span> seconds.</p>
+</div>
 <script>
 (function (params) {
     var bar = new YAHOO.WebGUI.Fork.ProgressBar();
@@ -53,6 +56,10 @@ my $template = <<'TEMPLATE';
                 document.getElementById('message').innerHTML = status.message;
                 document.getElementById('elapsed').innerHTML = data.elapsed;
             },
+            first  : function () {
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('ui').style.display = 'block';
+            },
             finish : function() {
                 YAHOO.WebGUI.Fork.redirect(params.redirect);
             },
diff --git a/lib/WebGUI/Fork/ProgressTree.pm b/lib/WebGUI/Fork/ProgressTree.pm
index 46146119e..ab340b03a 100644
--- a/lib/WebGUI/Fork/ProgressTree.pm
+++ b/lib/WebGUI/Fork/ProgressTree.pm
@@ -38,11 +38,14 @@ use JSON;
 use WebGUI::Fork::ProgressBar;
 
 my $template = <<'TEMPLATE';
-<div id='meter'></div>
-Current asset: <span id='focus'></span>
-(<span id='finished'></span>/<span id='total'></span>).<br />
-<span id='elapsed'></span> seconds elapsed.
-<ul id='tree'></ul>
+<div id='loading'>Loading...</div>
+<div id='ui' style='display: none'>
+    <div id='meter'></div>
+    Current asset: <span id='focus'></span>
+    (<span id='finished'></span>/<span id='total'></span>).<br />
+    <span id='elapsed'></span> seconds elapsed.
+    <ul id='tree'></ul>
+</div>
 <script>
 (function (params) {
     var bar = new YAHOO.WebGUI.Fork.ProgressBar();
@@ -104,6 +107,10 @@ Current asset: <span id='focus'></span>
         YAHOO.WebGUI.Fork.poll({
             url    : params.statusUrl,
             draw   : draw,
+            first  : function () {
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('ui').style.display = 'block';
+            },
             finish : function () {
                 YAHOO.WebGUI.Fork.redirect(params.redirect);
             },