loader

Description

A loader is aimed to wrap the loading of content in a standard way. It shows a loading state at first and then either the what has been loaded (or the results) or a "no records".
You can customize what comes in the center with ng-transclude.

Usage

Options

@ text-loading
can be used to provide a custom "loading" text
@ text-empty
can be used to provide a custom "empty response" text (which is blank by default)
@ text-error
can be used to provide a custom "error" text (which is blank by default)
@ loading-state
INITIAL
is the default state, used when the loading process has not been started
LOADING
is used when the loading process has started and is not complete
LOADED
is used when the loading process is complete and data were received
EMPTY
is used when the loading process is complete and no data were received
ERROR
is used when the loading process is failed

Examples

Initial state

<div cam-widget-loader></div>

Loading state

<div cam-widget-loader
     loading-state="LOADING"></div>

Loading state with custom text

<div cam-widget-loader
     text-loading="Custom loading text"
     loading-state="LOADING"></div>

Loaded state

<div cam-widget-loader
     loading-state="LOADED">

  <div class="panel panel-default">
    <div class="panel-heading">
      This has been loaded
    </div>
    <div class="panel-body">
      <p>Bacon ipsum dolor amet shank sirloin meatball, salami jerky short loin corned beef andouille strip steak cow ham kevin pastrami.</p>
    </div>
  </div><!-- /.panel -->

</div>
This has been loaded

Bacon ipsum dolor amet shank sirloin meatball, salami jerky short loin corned beef andouille strip steak cow ham kevin pastrami.

Empty state

<div cam-widget-loader
     loading-state="EMPTY">

  <div class="expected-hidden">
    Should not be visible.
  </div>

</div>
Should not be visible.

Empty state with custom text

<div cam-widget-loader
     loading-state="EMPTY"
     text-empty="Custom 'empty' text">

  <div class="expected-hidden">
    Should not be visible.
  </div>

</div>
Should not be visible.

Interactive

<div class="row">
  <div class="btn-group col-xs-4">
    <button class="btn btn-default reload"
            ng-click="reload()"
            ng-enabled="ctrlState !== 'LOADING'">
      Load
    </button>
    <button class="btn btn-default reload-empty"
            ng-click="reload(true)"
            ng-enabled="ctrlState !== 'LOADING'">
      Load empty
    </button>
    <button class="btn btn-danger fail-load"
            ng-click="fail()"
            ng-disabled="['LOADED', 'EMPTY', 'ERROR'].indexOf(ctrlState) !== -1">
      Fail! <span class="glyphicon glyphicon-fire"></span>
    </button>
  </div>
  <div class="col-xs-8">
    Current state: <code class="state-display">{{ ctrlState }}</code>
  </div>
</div><!-- /.row -->
<hr />

<div cam-widget-loader
     loading-state="{{ ctrlState }}"
     text-error="Custom error text">

  <div class="panel panel-default">
    <div class="panel-heading">
      This has been loaded
    </div>
    <div class="panel-body">
      <p>testInteractiveController has <code>ctrlVar1</code> with <code>{{ ctrlVar1 }}</code>.</p>
    </div>
  </div><!-- /.panel -->

</div>
Current state: {{ ctrlState }}

This has been loaded

testInteractiveController has ctrlVar1 with {{ ctrlVar1 }}.