From b21696e31c8f22ad03c79b4c622e1ee5aa03c86d Mon Sep 17 00:00:00 2001
From: Aleksuei Riabtsev <aleksuei.riabtsev@ec.gc.ca>
Date: Mon, 4 May 2015 08:02:55 -0400
Subject: [PATCH] fix(ui): unify loading animation as in core

Closes #9848

Signed-off-by: Aleksuei Riabtsev <aleksuei.riabtsev@ec.gc.ca>
---
 site/pages/ramp.hbs | 38 +++++++++++---------------------------
 1 file changed, 11 insertions(+), 27 deletions(-)

diff --git a/site/pages/ramp.hbs b/site/pages/ramp.hbs
index 6a6c8c6..87f225f 100644
--- a/site/pages/ramp.hbs
+++ b/site/pages/ramp.hbs
@@ -109,18 +109,16 @@
                                             <h3>{{t "mapExport.error.generalTitle"}}</h3>
                                             <p>{{t "mapExport.error.generalMessage"}}</p>
                                         </section>
-                                    <div class="sk-spinner sk-spinner-chasing-dots">
-                                        <div class="sk-dot1"></div>
-                                        <div class="sk-dot2"></div>
-                                    </div>
-                                    <span class="wb-inv">{{t "mapExport.loading"}}</span>
+                                    {{>loadingsimple}}
                                 </div>
                                 <div class="map-export-image">
                                     <img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" alt="">
                                 </div>
                             </div>
                             <div class="map-export-controls">
-                                <h2 class="mrgn-tp-sm mrgn-bttm-sm page-header h3">{{t "mapExport.title"}}</h2>
+                                <header>
+                                    <h2 class="mrgn-tp-sm mrgn-bttm-md h3">{{t "mapExport.title"}}</h2>
+                                </header>
                                 <button class="button-none button-close _tooltip popup-modal-dismiss" title="{{t "gui.actions.close"}}">
                                     <span class="wb-invisible">{{t "gui.actions.close"}}</span>
                                 </button>
@@ -181,11 +179,7 @@
                     </div>
                 </div>
                 <div id="map-load-indicator" class="">
-                    <span>{{t "map.loadingTitle"}}</span><ul>
-                        <li></li>
-                        <li></li>
-                        <li></li>
-                    </ul>
+                    {{>loadingsimple}}
                 </div>
             </div>
         </div>
@@ -204,14 +198,9 @@
                         </h2>-->
                         <div id="searchMapSectionBody">
                             <!--LAYER SELECTION BEGINS-->
-                            <ul class="loadingAnimation">
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                            </ul>
+                            <div class="loadingAnimation">
+                                {{>loadingsimple}}
+                            </div>
                             <!--LAYER SECTION END-->
                         </div>
                     <!--</div>-->
@@ -220,14 +209,9 @@
                 <details id="tabs1_2" data-panel-name="datagrid">
                     <summary class="">{{t "datagrid.dataTabTitle"}}</summary>
                     <div id="gridpane">
-                        <ul class="loadingAnimation">
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                        </ul>
+                        <div class="loadingAnimation">
+                            {{>loadingsimple}}
+                        </div>
                     </div>
                 </details>
             </div>