Anchor loader pulsar to avoid jumping around

 * Hide iframe until load message is received.

 * Use absolute positioning for loader.

Author: NyanHelsing

mfr/server/static/css/mfr.css

@@ -35,6 +35,23 @@ This CSS was stripped out of base.css from the osf-style repo.
   background-color: #337AB7;
 }
 
+.ball-scale {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 250px;
+}
+
 .embed-responsive-pdf {
     padding-bottom: 95%;
 }
+
+#mfrIframe iframe {
+    display: none;
+}
+
+#mfrIframe {
+    min-height: 250px;
+}

mfr/server/static/js/mfr.child.js

@@ -16,7 +16,7 @@
                 }
             });
         });
-    });
+    }, false);
 
     window.addEventListener('resize', function () {
         window.pymChild.sendHeight();

mfr/server/static/js/mfr.js

@@ -83,9 +83,10 @@
             self.pymParent.iframe.setAttribute('sandbox', 'allow-scripts allow-popups allow-same-origin');
 
             self.pymParent.el.appendChild(self.spinner);
-            $(self.pymParent.iframe).on('load', function () {
+            $(self.pymParent.iframe).on('load', function() {
                 self.pymParent.el.removeChild(self.spinner);
-            });
+                this.style.display = "block"
+            })
 
             self.pymParent.onMessage('embed', function(message) {
                 _addClass(self.pymParent.el, 'embed-responsive');