Loading screen on editor / source init state

assets/js/bundle.min.js

@@ -10334,13 +10334,13 @@ var _jquery2 = _interopRequireDefault(_jquery);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-(0, _jquery2.default)(document).ready(function ($) {
+(0, _jquery2.default)(function () {
-  $('#login-user').focus();
+  (0, _jquery2.default)('#login-user').focus();
 });
 });
 ___scope___.file("scss/app.scss", function(exports, require, module, __filename, __dirname){
 
-__fsbx_css("scss/app.scss", "@charset \"UTF-8\";\n/*\r\n\tHTML5 Reset :: style.css\r\n\t----------------------------------------------------------\r\n\tWe have learned much from/been inspired by/taken code where offered from:\r\n\tEric Meyer\t\t\t\t\t:: http://meyerweb.com\r\n\tHTML5 Doctor\t\t\t\t:: http://html5doctor.com\r\n\tand the HTML5 Boilerplate\t:: http://html5boilerplate.com\r\n-------------------------------------------------------------------------------*/\n/* Let's default this puppy out\r\n-------------------------------------------------------------------------------*/\nhtml, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-weight: normal;\n  vertical-align: baseline;\n  background: transparent; }\n\nmain, article, aside, figure, footer, header, nav, section, details, summary {\n  display: block; }\n\n/* Handle box-sizing while better addressing child elements:\r\n   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */\nhtml {\n  box-sizing: border-box; }\n\n*,\n*:before,\n*:after {\n  box-sizing: inherit; }\n\n/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */\n/* Responsive images and other embedded objects */\n/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */\nimg,\nobject,\nembed {\n  max-width: 100%; }\n\n/*\r\n   Note: keeping IMG here will cause problems if you're using foreground images as sprites.\r\n\tIn fact, it *will* cause problems with Google Maps' controls at small size.\r\n\tIf this is the case for you, try uncommenting the following:\r\n#map img {\r\n\t\tmax-width: none;\r\n}\r\n*/\n/* force a vertical scrollbar to prevent a jumpy page */\nhtml {\n  overflow-y: scroll; }\n\n/* we use a lot of ULs that aren't bulleted.\r\n\tyou'll have to restore the bullets within content,\r\n\twhich is fine because they're probably customized anyway */\nul {\n  list-style: none; }\n\nblockquote, q {\n  quotes: none; }\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n  content: '';\n  content: none; }\n\na {\n  margin: 0;\n  padding: 0;\n  font-size: 100%;\n  vertical-align: baseline;\n  background: transparent; }\n\ndel {\n  text-decoration: line-through; }\n\nabbr[title], dfn[title] {\n  border-bottom: 1px dotted #000;\n  cursor: help; }\n\n/* tables still need cellspacing=\"0\" in the markup */\ntable {\n  border-collapse: separate;\n  border-spacing: 0; }\n\nth {\n  font-weight: bold;\n  vertical-align: bottom; }\n\ntd {\n  font-weight: normal;\n  vertical-align: top; }\n\nhr {\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid #ccc;\n  margin: 1em 0;\n  padding: 0; }\n\ninput, select {\n  vertical-align: middle; }\n\npre {\n  white-space: pre;\n  /* CSS2 */\n  white-space: pre-wrap;\n  /* CSS 2.1 */\n  white-space: pre-line;\n  /* CSS 3 (and 2.1 as well, actually) */\n  word-wrap: break-word;\n  /* IE */ }\n\ninput[type=\"radio\"] {\n  vertical-align: text-bottom; }\n\ninput[type=\"checkbox\"] {\n  vertical-align: bottom; }\n\n.ie7 input[type=\"checkbox\"] {\n  vertical-align: baseline; }\n\n.ie6 input {\n  vertical-align: text-bottom; }\n\nselect, input, textarea {\n  font: 99% sans-serif; }\n\ntable {\n  font-size: inherit;\n  font: 100%; }\n\nsmall {\n  font-size: 85%; }\n\nstrong {\n  font-weight: bold; }\n\ntd, td img {\n  vertical-align: top; }\n\n/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */\nsub, sup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative; }\n\nsup {\n  top: -0.5em; }\n\nsub {\n  bottom: -0.25em; }\n\n/* standardize any monospaced elements */\npre, code, kbd, samp {\n  font-family: monospace, sans-serif; }\n\n/* hand cursor on clickable elements */\n.clickable,\nlabel,\ninput[type=button],\ninput[type=submit],\ninput[type=file],\nbutton {\n  cursor: pointer; }\n\n/* Webkit browsers add a 2px margin outside the chrome of form elements */\nbutton, input, select, textarea {\n  margin: 0; }\n\n/* make buttons play nice in IE */\nbutton,\ninput[type=button] {\n  width: auto;\n  overflow: visible; }\n\n/* scale images in IE7 more attractively */\n.ie7 img {\n  -ms-interpolation-mode: bicubic; }\n\n/* prevent BG image flicker upon hover\r\n   (commented out as usage is rare, and the filter syntax messes with some pre-processors)\r\n.ie6 html {filter: expression(document.execCommand(\"BackgroundImageCache\", false, true));}\r\n*/\n/* let's clear some floats */\n.clearfix:after {\n  content: \" \";\n  display: block;\n  clear: both; }\n\n/*Line truncated
+__fsbx_css("scss/app.scss", "@charset \"UTF-8\";\n/*\r\n\tHTML5 Reset :: style.css\r\n\t----------------------------------------------------------\r\n\tWe have learned much from/been inspired by/taken code where offered from:\r\n\tEric Meyer\t\t\t\t\t:: http://meyerweb.com\r\n\tHTML5 Doctor\t\t\t\t:: http://html5doctor.com\r\n\tand the HTML5 Boilerplate\t:: http://html5boilerplate.com\r\n-------------------------------------------------------------------------------*/\n/* Let's default this puppy out\r\n-------------------------------------------------------------------------------*/\nhtml, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-weight: normal;\n  vertical-align: baseline;\n  background: transparent; }\n\nmain, article, aside, figure, footer, header, nav, section, details, summary {\n  display: block; }\n\n/* Handle box-sizing while better addressing child elements:\r\n   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */\nhtml {\n  box-sizing: border-box; }\n\n*,\n*:before,\n*:after {\n  box-sizing: inherit; }\n\n/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */\n/* Responsive images and other embedded objects */\n/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */\nimg,\nobject,\nembed {\n  max-width: 100%; }\n\n/*\r\n   Note: keeping IMG here will cause problems if you're using foreground images as sprites.\r\n\tIn fact, it *will* cause problems with Google Maps' controls at small size.\r\n\tIf this is the case for you, try uncommenting the following:\r\n#map img {\r\n\t\tmax-width: none;\r\n}\r\n*/\n/* force a vertical scrollbar to prevent a jumpy page */\nhtml {\n  overflow-y: scroll; }\n\n/* we use a lot of ULs that aren't bulleted.\r\n\tyou'll have to restore the bullets within content,\r\n\twhich is fine because they're probably customized anyway */\nul {\n  list-style: none; }\n\nblockquote, q {\n  quotes: none; }\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n  content: '';\n  content: none; }\n\na {\n  margin: 0;\n  padding: 0;\n  font-size: 100%;\n  vertical-align: baseline;\n  background: transparent; }\n\ndel {\n  text-decoration: line-through; }\n\nabbr[title], dfn[title] {\n  border-bottom: 1px dotted #000;\n  cursor: help; }\n\n/* tables still need cellspacing=\"0\" in the markup */\ntable {\n  border-collapse: separate;\n  border-spacing: 0; }\n\nth {\n  font-weight: bold;\n  vertical-align: bottom; }\n\ntd {\n  font-weight: normal;\n  vertical-align: top; }\n\nhr {\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid #ccc;\n  margin: 1em 0;\n  padding: 0; }\n\ninput, select {\n  vertical-align: middle; }\n\npre {\n  white-space: pre;\n  /* CSS2 */\n  white-space: pre-wrap;\n  /* CSS 2.1 */\n  white-space: pre-line;\n  /* CSS 3 (and 2.1 as well, actually) */\n  word-wrap: break-word;\n  /* IE */ }\n\ninput[type=\"radio\"] {\n  vertical-align: text-bottom; }\n\ninput[type=\"checkbox\"] {\n  vertical-align: bottom; }\n\n.ie7 input[type=\"checkbox\"] {\n  vertical-align: baseline; }\n\n.ie6 input {\n  vertical-align: text-bottom; }\n\nselect, input, textarea {\n  font: 99% sans-serif; }\n\ntable {\n  font-size: inherit;\n  font: 100%; }\n\nsmall {\n  font-size: 85%; }\n\nstrong {\n  font-weight: bold; }\n\ntd, td img {\n  vertical-align: top; }\n\n/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */\nsub, sup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative; }\n\nsup {\n  top: -0.5em; }\n\nsub {\n  bottom: -0.25em; }\n\n/* standardize any monospaced elements */\npre, code, kbd, samp {\n  font-family: monospace, sans-serif; }\n\n/* hand cursor on clickable elements */\n.clickable,\nlabel,\ninput[type=button],\ninput[type=submit],\ninput[type=file],\nbutton {\n  cursor: pointer; }\n\n/* Webkit browsers add a 2px margin outside the chrome of form elements */\nbutton, input, select, textarea {\n  margin: 0; }\n\n/* make buttons play nice in IE */\nbutton,\ninput[type=button] {\n  width: auto;\n  overflow: visible; }\n\n/* scale images in IE7 more attractively */\n.ie7 img {\n  -ms-interpolation-mode: bicubic; }\n\n/* prevent BG image flicker upon hover\r\n   (commented out as usage is rare, and the filter syntax messes with some pre-processors)\r\n.ie6 html {filter: expression(document.execCommand(\"BackgroundImageCache\", false, true));}\r\n*/\n/* let's clear some floats */\n.clearfix:after {\n  content: \" \";\n  display: block;\n  clear: both; }\n\n/*Line truncated
 });
 ___scope___.file("js/app.js", function(exports, require, module, __filename, __dirname){
 
@@ -10710,6 +10710,8 @@ var _pages = require('../helpers/pages');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// -> Create New Document
+
 module.exports = function (currentBasePath) {
   var suggestedCreatePath = currentBasePath + '/new-page';
 
@@ -10742,12 +10744,19 @@ ___scope___.file("js/helpers/form.js", function(exports, require, module, __file
 'use strict';
 
 module.exports = {
+  /**
+   * Set Input Selection
+   * @param {DOMElement} input The input element
+   * @param {number} startPos The starting position
+   * @param {nunber} endPos The ending position
+   */
   setInputSelection: function setInputSelection(input, startPos, endPos) {
     input.focus();
     if (typeof input.selectionStart !== 'undefined') {
       input.selectionStart = startPos;
       input.selectionEnd = endPos;
     } else if (document.selection && document.selection.createRange) {
+      // IE branch
       input.select();
       var range = document.selection.createRange();
       range.collapse(true);
@@ -10769,6 +10778,11 @@ var _lodash2 = _interopRequireDefault(_lodash);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 module.exports = {
+  /**
+   * Convert raw path to safe path
+   * @param {string} rawPath Raw path
+   * @returns {string} Safe path
+   */
   makeSafePath: function makeSafePath(rawPath) {
     var rawParts = _lodash2.default.split(_lodash2.default.trim(rawPath), '/');
     rawParts = _lodash2.default.map(rawParts, function (r) {
@@ -10799,6 +10813,8 @@ var _pages = require('../helpers/pages');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// -> Move Existing Document
+
 module.exports = function (currentBasePath, alerts) {
   if (currentBasePath !== '') {
     (0, _jquery2.default)('.btn-move-prompt').removeClass('is-hidden');
@@ -10893,6 +10909,10 @@ var _simplemde = require("simplemde/dist/simplemde.min.js");
 
 var _simplemde2 = _interopRequireDefault(_simplemde);
 
+var _pageLoader = require("../components/page-loader");
+
+var _pageLoader2 = _interopRequireDefault(_pageLoader);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // ====================================
@@ -11055,6 +11075,8 @@ module.exports = function (alerts, pageEntryPath, socket) {
     vueVideo = require('./editor-video.js')(mde, mdeModalOpenState);
     vueCodeBlock = require('./editor-codeblock.js')(mde, mdeModalOpenState);
 
+    _pageLoader2.default.complete();
+
     // -> Save
 
     var saveCurrentDocument = function saveCurrentDocument(ev) {
@@ -11092,6 +11114,29 @@ module.exports = function (alerts, pageEntryPath, socket) {
   }
 };
 });
+___scope___.file("js/components/page-loader.js", function(exports, require, module, __filename, __dirname){
+
+'use strict';
+
+var _jquery = require('jquery');
+
+var _jquery2 = _interopRequireDefault(_jquery);
+
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = {
+  complete: function complete() {
+    (0, _jquery2.default)('#page-loader').addClass('is-loaded');
+    _lodash2.default.delay(function () {
+      (0, _jquery2.default)('#page-loader').addClass('is-hidden');
+    }, 1100);
+  }
+};
+});
 ___scope___.file("js/components/editor-image.js", function(exports, require, module, __filename, __dirname){
 
 'use strict';
@@ -12120,6 +12165,10 @@ require('brace/theme/tomorrow_night');
 
 require('brace/mode/markdown');
 
+var _pageLoader = require('../components/page-loader');
+
+var _pageLoader2 = _interopRequireDefault(_pageLoader);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -12139,6 +12188,10 @@ module.exports = function (alerts) {
 
     require('../modals/create.js')(currentBasePath);
     require('../modals/move.js')(currentBasePath, alerts);
+
+    scEditor.renderer.on('afterRender', function () {
+      _pageLoader2.default.complete();
+    });
   }
 };
 });

client/js/components/editor.js

@@ -5,6 +5,7 @@ import Vue from 'vue'
 import _ from 'lodash'
 import filesize from 'filesize.js'
 import SimpleMDE from 'simplemde'
+import pageLoader from '../components/page-loader'
 
 // ====================================
 // Markdown Editor
@@ -189,6 +190,8 @@ module.exports = (alerts, pageEntryPath, socket) => {
     vueVideo = require('./editor-video.js')(mde, mdeModalOpenState)
     vueCodeBlock = require('./editor-codeblock.js')(mde, mdeModalOpenState)
 
+    pageLoader.complete()
+
     // -> Save
 
     let saveCurrentDocument = (ev) => {

client/js/components/page-loader.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import $ from 'jquery'
+import _ from 'lodash'
+
+module.exports = {
+
+  complete () {
+    $('#page-loader').addClass('is-loaded')
+    _.delay(() => {
+      $('#page-loader').addClass('is-hidden')
+    }, 1100)
+  }
+}

client/js/login.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import jQuery from 'jquery'
+import $ from 'jquery'
 
-jQuery(document).ready(function ($) {
+$(() => {
   $('#login-user').focus()
 })

client/js/pages/source.js

@@ -4,6 +4,7 @@ import $ from 'jquery'
 import * as ace from 'brace'
 import 'brace/theme/tomorrow_night'
 import 'brace/mode/markdown'
+import pageLoader from '../components/page-loader'
 
 module.exports = (alerts) => {
   if ($('#page-type-source').length) {
@@ -20,5 +21,9 @@ module.exports = (alerts) => {
 
     require('../modals/create.js')(currentBasePath)
     require('../modals/move.js')(currentBasePath, alerts)
+
+    scEditor.renderer.on('afterRender', () => {
+      pageLoader.complete()
+    })
   }
 }

client/scss/app.scss

@@ -34,5 +34,6 @@
 @import 'components/_editor';
 
 @import 'layout/_header';
+@import 'layout/_loader';
 
 @import 'pages/_welcome';

client/scss/layout/_content.scss

@@ -1,145 +0,0 @@
-
-
-#page-type-view > section {
-	transition: background-color .5s ease;
-
-	&.blurred {
-		background-color: mc('grey', '50');
-	}
-
-}
-
-.sd-menus {
-
-	width: 300px;
-
-}
-
-.menu {
-	.menu-list a, .menu-nav a {
-		display: flex;
-		align-items: center;
-	}
-
-	.menu-list .icon {
-		margin-right: 8px
-	}
-}
-
-.section.is-small {
-	padding: 20px 20px;
-}
-
-.mkcontent {
-
-	h1 {
-		border-bottom: 1px dotted mc('blue', '500');
-		padding-bottom: 4px;
-		font-weight: 400;
-		color: desaturate(mc('blue', '500'), 20%);
-	}
-
-	h2 {
-		border-bottom: 1px dotted mc('grey', '100');
-		padding-bottom: 4px;
-		font-weight: 400;
-		color: desaturate(mc('purple', '500'), 20%);
-	}
-
-	a.toc-anchor {
-		font-size: 80%;
-		color: mc('blue', '500');
-		border-bottom: none;
-
-		&:visited {
-			color: mc('purple', '500') !important;
-		}
-
-	}
-
-	a.external-link {
-		position: relative;
-		padding-left: 20px;
-
-		&:before {
-			content: "\f08e";
-			font-family: FontAwesome;
-			font-style: normal;
-			font-weight: normal;
-			text-decoration: inherit;
-			color: mc('grey', '500');
-			font-size: 14px;
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-
-	}
-
-	pre {
-		padding: 0;
-		font-family: $core-font-monospace;
-
-		> code {
-			box-shadow: inset 0 0 5px 0 mc('grey', '100');
-			border-radius: 5px;
-		}
-
-	}
-
-	pre + p {
-		padding-top: 1em;
-	}
-
-	img.right {
-		float:right;
-	}
-
-	img.pagelogo {
-		float: right;
-		margin-top: -75px;
-		max-width: 200px;
-		background-color: #FFF;
-	}
-
-	strong {
-		color: mc('grey', '700');
-	}
-
-	.twa {
-		font-size: 120%;
-	}
-
-	table thead th {
-		background-color: mc('blue', '500');
-		color: #FFF;
-		border-color: #FFF;
-		border-bottom-color: mc('blue', '500');
-		border-top-color: mc('blue', '500');
-
-		&:first-child {
-			border-left-color: mc('blue', '500');
-		}
-
-		&:last-child {
-			border-right-color: mc('blue', '500');
-		}
-
-	}
-
-}
-
-.content a:not(.button):visited {
-  color: mc('teal', '500');
-  font-weight: 500;
-}
-
-code {
-	font-weight: 500;
-	color: mc('purple', '500');
-}
-
-p code {
-	padding: 2px 5px;
-	border-radius: 4px;
-}

client/scss/layout/_loader.scss

@@ -0,0 +1,54 @@
+#page-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: mc('blue-grey', '800');
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: mc('blue-grey', '100');
+  font-weight: 300;
+  font-size: 18px;
+  flex-direction: column;
+
+  > i {
+		width: 48px;
+		height: 48px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+    margin-bottom: 25px;
+
+		&::before {
+			content: " ";
+			@include spinner(mc('blue-grey', '200'), 0.4s, 48px);
+		}
+	}
+
+  @include keyframes(pageLoaderExit) {
+    0% {
+      opacity: 1;
+    }
+    99% {
+      display: flex;
+      opacity: 0;
+      transform: scale(1.1, 1.1);
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+
+  &.is-loaded {
+    animation: pageLoaderExit 1s ease forwards;
+  }
+
+  &.is-hidden {
+    display: none !important;
+  }
+
+}

client/scss/layout/_mixins.scss

@@ -1,85 +0,0 @@
-/**
- * Clearfix
- *
- * @return     {string}  Clearfix attribute
- */
-@mixin clearfix {
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}
-
-/**
- * Placeholder attribute for inputs
- *
- * @return     {string}  Placeholder attributes
- */
-@mixin placeholder {
-	&::-webkit-input-placeholder {@content};
-	&::-moz-placeholder {@content}
-	&:-ms-input-placeholder {@content}
-	&:placeholder-shown {@content};
-}
-
-/**
- * Spinner element
- *
- * @param      {string}  $color             - Color
- * @param      {string}  $dur               - Animation Duration
- * @param      {int}     $width             - Width
- * @param      {int}     $height  [$width]  - height
- *
- * @return     {string}  Spinner element
- */
-@mixin spinner($color,$dur,$width,$height:$width) {
-	width: $width;
-	height: $height;
-	border-radius: 50%;
-	box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
-	@include prefix(animation, spin $dur linear infinite);
-	@include keyframes(spin) {
-		100%{
-		 @include prefix(transform, rotate(360deg));
-		}
-	};
-}
-
-/**
- * Prefixes for keyframes
- *
- * @param      {string}  $animation-name          - The animation name
- *
- * @return     {string}  Prefixed keyframes attributes
- */
-@mixin keyframes($animation-name) {
-    @-webkit-keyframes #{$animation-name} {
-        @content;
-    }
-    @-moz-keyframes #{$animation-name} {
-        @content;
-    }
-    @-o-keyframes #{$animation-name} {
-        @content;
-    }  
-    @keyframes #{$animation-name} {
-        @content;
-    }
-}
-
-/**
- * Prefix function for browser compatibility
- *
- * @param      {string}  $property          - Property name
- * @param      {any}     $value             - Property value
- *
- * @return     {string}  Prefixed attributes
- */
-@mixin prefix($property, $value) {
-  -webkit-#{$property}: #{$value};
-     -moz-#{$property}: #{$value};
-      -ms-#{$property}: #{$value};
-       -o-#{$property}: #{$value};
-          #{$property}: #{$value};
-}

views/configure/index.pug

@@ -12,8 +12,6 @@ html(data-logic='configure')
     // JS / CSS
     script(type='text/javascript', src='/js/configure.min.js')
 
-    block head
-
   body
     #root
       #header-container

views/pages/create.pug

@@ -25,3 +25,8 @@ block content
   include ../modals/editor-file.pug
   include ../modals/editor-video.pug
   include ../modals/editor-codeblock.pug
+
+block outside
+  #page-loader
+    i
+    span Loading editor...

views/pages/edit.pug

@@ -25,3 +25,8 @@ block content
   include ../modals/editor-file.pug
   include ../modals/editor-video.pug
   include ../modals/editor-codeblock.pug
+
+block outside
+  #page-loader
+    i
+    span Loading editor...

views/pages/source.pug

@@ -29,3 +29,8 @@ block content
 
   include ../modals/create.pug
   include ../modals/move.pug
+
+block outside
+  #page-loader
+    i
+    span Loading source...