From 43967ffa1edda011c11241c83c3ed6dce841fbdb Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 25 Jan 2019 15:14:18 -0200
Subject: [PATCH] Adds loading spinner to main tag while jQuery(document).ready
 is not done.

---
 src/assets/js/js.js        |  3 +++
 src/assets/scss/style.scss | 39 ++++++++++++++++++++++++++++++++++++++
 src/functions.php          | 15 +++++++++++++++
 3 files changed, 57 insertions(+)

diff --git a/src/assets/js/js.js b/src/assets/js/js.js
index 56ab76a..9971ec6 100644
--- a/src/assets/js/js.js
+++ b/src/assets/js/js.js
@@ -1,4 +1,7 @@
 jQuery( document ).ready(function( $ ) {
+
+	$( 'body' ).removeClass('loading-content');
+
 	$( '#carouselExample' ).on( 'slide.bs.carousel', function ( e ) {
 
 		var $e = $( e.relatedTarget );
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 8d93cf5..0581db1 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -23,6 +23,45 @@ body{
     }
 }
 
+body.loading-content main {
+    min-height: calc(100vh - 480px);
+    width: 100vw;
+    transition: min-height ease 0.3s,  height ease 0.3s; 
+}
+
+body.loading-content main>* {
+    display: none;
+    visibility: hidden;
+}
+
+@keyframes spinner-border {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+
+body.loading-content main:before {
+    content: ' ';
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 4rem;
+    height: 4rem;
+    margin: 4rem 50% 0 50%;
+    vertical-align: center;
+    border: 0.25rem solid #dbdbdb;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    border-radius: 50%;
+    -webkit-animation: spinner-border .5s linear infinite;
+    animation: spinner-border .5s linear infinite;
+}
+
 // Animation for return to top
 @keyframes appear-from-bottom {
     from {
diff --git a/src/functions.php b/src/functions.php
index f4b9f36..4941f0c 100644
--- a/src/functions.php
+++ b/src/functions.php
@@ -104,6 +104,21 @@ if ( ! isset( $content_width ) ) {
 	$content_width = 1400;
 }
 
+/**
+ * Adds extra classes dp body tag. has-not-finished-loading is removed
+ * from tag after jQuery.document(ready). It is used to style page while
+ * not all DOM and JS is finished.
+ *
+ * @since Tainacan Theme
+ */
+add_filter( 'body_class', 'custom_class' );
+function custom_class( $classes ) {
+
+	$classes[] = 'loading-content';
+
+	return $classes;
+}
+
 /*
 * Register Widgets SideBar
 */