From 639e31a2c071786b5b47b05bbc263ba4817b6f60 Mon Sep 17 00:00:00 2001
From: Mike Nolan <me@michael-nolan.com>
Date: Tue, 16 Aug 2016 14:27:01 -0400
Subject: [PATCH] Added loading svg prior to init

Resolves #70
---
 PopcornEditor.js                     | 23 ++++++++++++++++++++++-
 PopcornEditor/resources/ring-alt.svg |  1 +
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 PopcornEditor/resources/ring-alt.svg

diff --git a/PopcornEditor.js b/PopcornEditor.js
index c0609ab..0a09712 100644
--- a/PopcornEditor.js
+++ b/PopcornEditor.js
@@ -10,9 +10,30 @@ function PopcornEditor() {
 
   this.init = function (el, url) {
     var editor = (typeof el === 'string') ? document.getElementById(el) : el,
-        url = url || 'PopcornEditor/editor.html';
+        url = url || 'PopcornEditor/editor.html',
+        loadingDiv = null,
+        loadingSpinner = null;
 
     window.addEventListener('message', onmessage);
+    this.listen('loaded', function () {
+      document.querySelector('#loading').remove();
+    });
+
+    loadingDiv = document.createElement('div');
+    loadingDiv.setAttribute('id', 'loading');
+    loadingDiv.style.width = '100%';
+    loadingDiv.style.height = '100%';
+    loadingDiv.style.backgroundColor = 'white';
+    loadingDiv.style.display = 'flex';
+    loadingDiv.style.justifyContent = 'center';
+
+    loadingSpinner = document.createElement('img');
+    loadingSpinner.setAttribute('class', 'loading-spinner');
+    loadingSpinner.setAttribute('src', 'PopcornEditor/resources/ring-alt.svg');
+    loadingSpinner.style.width = '30%';
+
+    loadingDiv.appendChild(loadingSpinner);
+    editor.appendChild(loadingDiv);
 
     this.iframe = document.createElement('iframe'),
 
diff --git a/PopcornEditor/resources/ring-alt.svg b/PopcornEditor/resources/ring-alt.svg
new file mode 100644
index 0000000..b1844c4
--- /dev/null
+++ b/PopcornEditor/resources/ring-alt.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width='120px' height='120px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#afafb7" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#5cffd6" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>
\ No newline at end of file