Automatic 'loading' indicator when calling an async function

Question

I am looking for a way to automate showing and hiding a \'loading\' message when calling an async service, so instead of doing this:

showLoadingWidget();

se         


        

Answer 1

In case anyone is looking for a way to mark a screen element (widget / component) as busy during an RPC call I've implemented a small utility.

It disables the component and inserts a 'div' with a particular style. Naturally this can all be undone too.

At time of writing this was the style applied to the div:

@sprite .busySpinner {
    gwt-image: "spinnerGif";
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Something really high */
}

And the utility methods:

/**
 * Disables the given component and places spinner gif over top.
 */
public static void markBusy(final Component c) {
    c.disable();
    ensureNotBusy(c);
    // NOTE: Don't add style to the component as we don't want 'spinner' to be disabled.
    c.getElement().insertFirst("
");
}

/**
 * Enables the given component and removes the spinner (if any).
 */
public static void clearBusy(Component c) {
    c.enable();
    if (!ensureNotBusy(c)) {
        GWT.log("No busy spinner to remove");
    }
}

private static boolean ensureNotBusy(Component c) {
    Element first = c.getElement().getFirstChildElement();
    if (first != null && first.removeClassName(STYLE.busySpinner())) {
        first.removeFromParent();
        return true;
    }
    return false;
}