From 8bbe872e0720bf006ccc623c1461c4e9e7ab5ca1 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Tue, 24 May 2016 18:15:42 +0300
Subject: [PATCH] docs(spinner): spinner and preloader componets explanation

---
 .../{051-sidebar => 015-sidebar}/index.md     |  0
 docs/contents/articles/016-spinner/index.md   | 59 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 rename docs/contents/articles/{051-sidebar => 015-sidebar}/index.md (100%)
 create mode 100644 docs/contents/articles/016-spinner/index.md

diff --git a/docs/contents/articles/051-sidebar/index.md b/docs/contents/articles/015-sidebar/index.md
similarity index 100%
rename from docs/contents/articles/051-sidebar/index.md
rename to docs/contents/articles/015-sidebar/index.md
diff --git a/docs/contents/articles/016-spinner/index.md b/docs/contents/articles/016-spinner/index.md
new file mode 100644
index 00000000..df2253be
--- /dev/null
+++ b/docs/contents/articles/016-spinner/index.md
@@ -0,0 +1,59 @@
+---
+title: Theme Spinner
+author: vl
+sort: 950
+group: Components
+template: article.jade
+---
+
+Theme Spinner `BaThemeSpinner` is a small service helper allowing you to show a preloader spinner while executing some long-running tasks.
+Same spinner you can see after reloading a page - it is shown while application is initializing Anuglar 2 and loading charts and images.
+ 
+The usage interface in quite simple, there are two public methods: `show` and `hide`.
+
+Theme Spinner comes with another small helper called `BaThemePreloader`. 
+This service globally integrated into the application and connected to the spinner.
+
+You can register any promise in any part of the application so that the spinner will be hidden only after your promise is completed (resolved).
+
+You can find an example of usage inside of the `app.component.ts` file.
+Here we registering a loader (`this._imageLoader.load` just returns a `Promise`) which loads a background image:
+```javascript
+  BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
+```
+
+Then we starting all the registered promises and once they all are done - hiding the spinner.
+```javascript
+  BaThemePreloader.load().then((values) => {
+       this._spinner.hide();
+  });
+```
+
+## Example
+You also can register a loader on any page you want.
+Say you have a long-running task on the Charts page (you need to receive some data from a web service) and you want the spinner to be shown while the data is loading.
+
+First thing you need to do is to import BaThemePreloader service:
+
+```javascript
+  import {BaThemePreloader} from '../../../../theme/services';
+```
+
+Then, say you have a method loading some data called `_loadData`, in our case we just mocked this method with `setTimeout` to emulate the loading process:
+```javascript
+  private _loadData():Promise<any> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve();
+      }, 4000);
+    });
+  }
+```
+
+Last thing you need to do is to register your loader:
+
+```javascript
+  BaThemePreloader.registerLoader(this._loadData());
+```
+
+That's basically it! Once your data is loaded and all other registered loaders are completed - the spinner will be hidden.
\ No newline at end of file