implemented simple system to ensure css is loaded. This fixes several major rendering...

svn changeset:5430/svn branch:trunk

diff --git a/WebContent/ITMILL/themes/default/common/common.css b/WebContent/ITMILL/themes/default/common/common.css
index dac33a787971853af452a317321c4f3ea7b3657c..bc633c73ed21cc3d3dc47c18cd266f0501549aac 100644 (file)
--- a/WebContent/ITMILL/themes/default/common/common.css
+++ b/WebContent/ITMILL/themes/default/common/common.css
@@ -197,7 +197,10 @@ input.i-modified,
        padding-bottom: 1px;
 }
 
-/* Loading indicator states */
+/* Loading indicator states
+ * Note: client side expects that loading indicator has a height. It depends on
+ * this css property to ensure browsers have applied all required styles.
+ */
 
 .i-loading-indicator,
 .i-loading-indicator-delay,

diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css
index 4a3a7d6377a01e69fd58ad7b129b3e7f5125dd3e..e4a810818e101089417d0a8a9f001ac249e46e61 100644 (file)
--- a/WebContent/ITMILL/themes/default/styles.css
+++ b/WebContent/ITMILL/themes/default/styles.css
@@ -327,7 +327,10 @@ input.i-modified,
        padding-bottom: 1px;
 }
 
-/* Loading indicator states */
+/* Loading indicator states
+ * Note: client side expects that loading indicator has a height. It depends on
+ * this css property to ensure browsers have applied all required styles.
+ */
 
 .i-loading-indicator,
 .i-loading-indicator-delay,

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java b/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java
index c6a45ed2b4370be01f136fbb5b94d9da52b24c5a..96fbf4a919c829ff9500ded6bd5ad20bebb02de2 100755 (executable)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java
@@ -135,9 +135,9 @@ public class ApplicationConnection {
         initializeClientHooks();
 
         view = new IView(cnf.getRootPanelId());
+        showLoadingIndicator();
 
         makeUidlRequest("", true, false);
-        applicationRunning = true;
     }
 
     /**
@@ -268,7 +268,36 @@ public class ApplicationConnection {
 
                     public void onResponseReceived(Request request,
                             Response response) {
-                        handleReceivedJSONMessage(response);
+                        if (applicationRunning) {
+                            handleReceivedJSONMessage(response);
+                        } else {
+                            applicationRunning = true;
+                            handleWhenCSSLoaded(response);
+                        }
+                    }
+
+                    int cssWaits = 0;
+                    static final int MAX_CSS_WAITS = 20;
+
+                    private void handleWhenCSSLoaded(final Response response) {
+                        int heightOfLoadElement = DOM.getElementPropertyInt(loadElement, "offsetHeight");
+                        if (heightOfLoadElement == 0
+                                && cssWaits < MAX_CSS_WAITS) {
+                            (new Timer() {
+                                public void run() {
+                                    handleWhenCSSLoaded(response);
+                                }
+                            }).schedule(50);
+                            console
+                                    .log("Assuming CSS loading is not complete, postponing render phase. (.i-loading-indicator height == 0)");
+                            cssWaits++;
+                        } else {
+                            handleReceivedJSONMessage(response);
+                            if (cssWaits >= MAX_CSS_WAITS) {
+                                console
+                                        .error("CSS files may have not loaded properly.");
+                            }
+                        }
                     }
 
                 });
@@ -300,7 +329,16 @@ public class ApplicationConnection {
 
     private void startRequest() {
         activeRequests++;
-        showLoadingIndicator();
+        // show initial throbber
+        if (loadTimer == null) {
+            loadTimer = new Timer() {
+                public void run() {
+                    showLoadingIndicator();
+                }
+            };
+            // First one kicks in at 300ms
+        }
+        loadTimer.schedule(300);
     }
 
     private void endRequest() {
@@ -360,57 +398,38 @@ public class ApplicationConnection {
 
     private void showLoadingIndicator() {
         // show initial throbber
-        if (loadTimer == null) {
-            loadTimer = new Timer() {
-                public void run() {
-                    // show initial throbber
-                    if (loadElement == null) {
-                        loadElement = DOM.createDiv();
-                        DOM.setStyleAttribute(loadElement, "position",
-                                "absolute");
-                        DOM.appendChild(view.getElement(), loadElement);
-                        ApplicationConnection.getConsole().log(
-                                "inserting load indicator");
-                        // Position
-                        DOM.setStyleAttribute(loadElement, "top", (view
-                                .getAbsoluteTop() + 6)
-                                + "px");
-                    }
-                    DOM.setElementProperty(loadElement, "className",
-                            "i-loading-indicator");
-                    DOM.setStyleAttribute(loadElement, "display", "block");
-                    final int updatedX = Window.getScrollLeft()
-                            + view.getAbsoluteLeft()
-                            + view.getOffsetWidth()
-                            - DOM.getElementPropertyInt(loadElement,
-                                    "offsetWidth") - 5;
-                    DOM.setStyleAttribute(loadElement, "left", updatedX + "px");
-                    final int updatedY = Window.getScrollTop() + 6
-                            + view.getAbsoluteTop();
-                    DOM.setStyleAttribute(loadElement, "top", updatedY + "px");
-                    // Initialize other timers
-                    loadTimer2 = new Timer() {
-                        public void run() {
-                            DOM.setElementProperty(loadElement, "className",
-                                    "i-loading-indicator-delay");
-                        }
-                    };
-                    // Second one kicks in at 1500ms
-                    loadTimer2.schedule(1200);
-
-                    loadTimer3 = new Timer() {
-                        public void run() {
-                            DOM.setElementProperty(loadElement, "className",
-                                    "i-loading-indicator-wait");
-                        }
-                    };
-                    // Third one kicks in at 5000ms
-                    loadTimer3.schedule(4700);
-                }
-            };
-            // First one kicks in at 300ms
-            loadTimer.schedule(300);
+        if (loadElement == null) {
+            loadElement = DOM.createDiv();
+            DOM.setStyleAttribute(loadElement, "position", "absolute");
+            DOM.appendChild(view.getElement(), loadElement);
+            ApplicationConnection.getConsole().log("inserting load indicator");
         }
+        DOM.setElementProperty(loadElement, "className", "i-loading-indicator");
+        DOM.setStyleAttribute(loadElement, "display", "block");
+        final int updatedX = Window.getScrollLeft() + view.getAbsoluteLeft()
+                + view.getOffsetWidth()
+                - DOM.getElementPropertyInt(loadElement, "offsetWidth") - 5;
+        DOM.setStyleAttribute(loadElement, "left", updatedX + "px");
+        final int updatedY = Window.getScrollTop() + 6 + view.getAbsoluteTop();
+        DOM.setStyleAttribute(loadElement, "top", updatedY + "px");
+        // Initialize other timers
+        loadTimer2 = new Timer() {
+            public void run() {
+                DOM.setElementProperty(loadElement, "className",
+                        "i-loading-indicator-delay");
+            }
+        };
+        // Second one kicks in at 1500ms from request start
+        loadTimer2.schedule(1200);
+
+        loadTimer3 = new Timer() {
+            public void run() {
+                DOM.setElementProperty(loadElement, "className",
+                        "i-loading-indicator-wait");
+            }
+        };
+        // Third one kicks in at 5000ms from request start
+        loadTimer3.schedule(4700);
     }
 
     private void hideLoadingIndicator() {
@@ -423,8 +442,7 @@ public class ApplicationConnection {
             loadTimer = null;
         }
         if (loadElement != null) {
-            DOM.removeChild(view.getElement(), loadElement);
-            loadElement = null;
+            DOM.setStyleAttribute(loadElement, "display", "none");
         }
     }