Loading screen on editor / source init state

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

+'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

 '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 @@ $primary: 'indigo';
 @import 'components/_editor';
 
 @import 'layout/_header';
+@import 'layout/_loader';
 
 @import 'pages/_welcome';

client/scss/layout/_content.scss

-
-
-#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;
-}
\ No newline at end of file

client/scss/layout/_loader.scss

+#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

-/**
- * 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};
-}
\ No newline at end of file

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...