Loading

Loading

When you do any action, it might take time for the websocket to respond (depending on network time, CPU speed, etc.) As such it can feel awkward if you press a button and nothing happens. This is not a problem unique to websockets, of course - the same would happen with an AJAX call. A typical solution is a 'loader'. Medusa comes with a built-in loader for all of our actions.

<button m:click="loadingLogic()" m:loading-until="loading-done">
    Loading full page (default)
</button>

<button m:click="loadingLogic()" m:loading-until="loading-done" m:loading-style="full">
    Loading full page (explicit)
</button>

<button m:click="loadingLogic()" m:loading-until="loading-done" m:loading-style="top">
    Loading top
</button>

<button m:click="loadingLogic()" m:loading-until="loading-done" m:loading-style="button">
    Loading button only
</button>

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;
import io.getmedusa.medusa.core.attributes.StandardAttributeKeys;

import java.util.List;

@UIEventPage(path = "/detail/loading", file = "/pages/loading.html")
public class LoadingController {

    public List<Attribute> loadingLogic() {
        return List.of(new Attribute(StandardAttributeKeys.LOADING, "loading-done"));
    }

}

Custom loaders

By default, Medusa comes with pre-defined loaders. If you want to customize those, you will have to create a new file in a /fragments folder.

You can define a custom global loader via a /fragments/_global_loader.html. Make sure there is a wrapper element with id "m-full-loader" present.

You can define a custom button loader via a /fragments/_button_loader.html. Make sure there is a wrapper element with class "m-button-loader" present.