From 59b3591d22a6050bee421af3c58cab302f197ab5 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Sun, 23 Oct 2016 19:06:18 +0200
Subject: show a loader

---
 themes/flog/layouts/partials/footer.html | 33 +++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/themes/flog/layouts/partials/footer.html b/themes/flog/layouts/partials/footer.html
index 5d4ac07..fc0f949 100644
--- a/themes/flog/layouts/partials/footer.html
+++ b/themes/flog/layouts/partials/footer.html
@@ -1,5 +1,18 @@
             </div> <!-- .container -->
         </div> <!-- #main -->
+        <div id="loading" style="position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0; display: none;">
+            <div class="preloader-wrapper big active" style="top: 45%; left: 45%;">
+                <div class="spinner-layer spinner-blue-only">
+                    <div class="circle-clipper left">
+                        <div class="circle"></div>
+                    </div><div class="gap-patch">
+                        <div class="circle"></div>
+                    </div><div class="circle-clipper right">
+                        <div class="circle"></div>
+                    </div>
+                </div>
+            </div>
+        </div> <!-- #loading -->
         <script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
         <script type="text/javascript" src="/js/materialize-0.97.7.min.js"></script>
         <script type="text/javascript" src="/js/smoothstate-0.5.2.min.js"></script>
@@ -16,7 +29,25 @@
 
             $(document).ready(function() {
                 $('.button-collapse').sideNav();
-                $('#main').smoothState({ prefetch: true, onAfter: ready });
+                $('#main').smoothState({ 
+                    prefetch: true,
+                    onAfter: ready,
+                    onStart: {
+                        duration: 250,
+                        render: function (container) {
+                            $('#loading').fadeTo(250, 0.3);
+                            $('#loading').show();
+                        }
+                    },
+                    onReady: {
+                        duration: 100,
+                        render: function (container, newContent) {
+                            $('#loading').fadeTo(100, 0);
+                            $('#loading').hide();
+                            container.html(newContent);
+                        }
+                    }
+                });
             });
             $('body').imagesLoaded({ background: true }, function() {
                 $('<img src="/images/skyline.jpg">').load(function() {
-- 
cgit v1.3.1