Issue #137 new

Hide dashboard initilization

transitdk
created an issue

I wasn't a huge fan of the way the dashboard initialized since you could see the widgets moving around and collapsing and hiding themselves. I made a few slight additions which hides the widgets until the initialization is finished.

In the template

Changed loadScripts at line 39 in dashboard.html to

    loadScripts(js_files, function(){
        jQuery(function($) {
            init_dashboard(
                '{{ dashboard.get_id }}',
                {{ dashboard.columns }},
                {% autoescape off %}{{ dashboard_preferences }}{% endautoescape %},
                '{% url 'admin-tools-dashboard-set-preferences' dashboard.get_id %}'
            );
            setTimeout(function() {
                jQuery("#{{ dashboard.get_id }}_loader").hide()
                jQuery("#{{ dashboard.get_id }}").show()
            }, 500);
        });
    });

Just before the dashboard-container div on line 69 I added.

<div id="{{ dashboard.get_id }}_loader" class="dashboard-loader-container">
       <!-- loader code -->
</div>

CSS

I modified dashbaord.css so that dashboard-container and dasboard-panel where display: none; by default, and added:

.dashboard-loader-container {
  vertical-align: middle;
  width: 100%;
  padding: 75px;
  text-align: center;
}

The loader

This could be anything, but for funsies here's the loader I used.

<style>
.loading {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  padding: 0.5em;
  vertical-align: middle;
  text-align: center;
  background-color: transparent;
  border: 5px solid transparent;
  border-top-color: #c9c9c9;
  border-bottom-color: #c9c9c9;
  border-radius: 50%;
}
.outer {
  animation: spin 1s infinite;
  -webkit-animation: spin 1s infinite;
}

.inner {
  animation: spin 1s infinite;
  -webkit-animation: spin 1s infinite;
}
@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}
.dashboard-loader-container {
  vertical-align: middle;
  width: 100%;
  padding: 75px;
  text-align: center;
}
</style>

<div id="{{ dashboard.get_id }}_loader" class="dashboard-loader-container">
    <div class="loading outer">
        <div class="loading inner"></div>
    </div>
</div>

Which was a variant from http://codepen.io/adonisk/pen/IAzbo , and here is a great collection of loaders/spinners: http://codepen.io/collection/HtAne/

Comments (1)

  1. Log in to comment