feat: wire up new PL-specific iframe loader toast to display before the JS updating the iframe content kicks in

Author: bolt-bot

packages/uikit-workshop/gulpfile.js

@@ -56,6 +56,10 @@ gulp.task('build:css', function() {
       style: 'expanded',
       'sourcemap=none': true,
     })
+    .src([
+      'src/sass/pattern-lab.scss',
+      'src/sass/pattern-lab--iframe-loader.scss',
+    ])
     .pipe(
       plugins.autoprefixer(
         {

packages/uikit-workshop/src/html/partials/iframe-loader.html

@@ -0,0 +1,13 @@
+<div class="pl-c-loader">
+  <div class="pl-c-loader__content">
+    <div class="pl-c-loader__message">Loading Pattern Lab</div>
+    <div class="pl-c-loader__spinner">
+      <svg class="pl-c-loader-svg" viewBox="0 0 268 255">
+        <circle class="pl-c-loader-svg__outer-circle" cx="134.2" cy="127.6" r="115.1"/>
+        <circle class="pl-c-loader-svg__inner-circle" cx="134.2" cy="127.6" r="66.3"/>
+        <path class="pl-c-loader-svg__electron" d="M253,56.3c0,15.6-12.6,28.2-28.2,28.2s-28.2-12.6-28.2-28.2s12.6-28.2,28.2-28.2
+          C240.3,28.1,253,40.7,253,56.3z"/>
+      </svg>
+    </div>
+  </div>
+</div>

packages/uikit-workshop/src/html/partials/iframe.html

@@ -1,11 +1,11 @@
 <div class="pl-c-viewport pl-js-viewport">
-    
+
     <div class="pl-c-viewport__cover pl-js-viewport-cover"></div>
 
     <div class="pl-c-viewport__iframe-wrapper pl-js-vp-iframe-container">
-        
-        <iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"></iframe>
-        
+
+      <iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals" srcdoc='<style>@@include('../../../dist/styleguide/css/pattern-lab--iframe-loader.css')</style>@@include('./iframe-loader.html')'></iframe>
+
         <div class="pl-c-viewport__resizer pl-js-resize-container">
 
           <div class="pl-c-viewport__resizer-handle pl-js-resize-handle"></div>
@@ -14,4 +14,4 @@
 
     </div><!--end pl-c-viewport__iframe-wrapper-->
 
-</div><!--end pl-c-viewport-->
+</div><!--end pl-c-viewport-->

packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss

@@ -0,0 +1,85 @@
+@import 'scss/abstracts/variables';
+@import 'scss/abstracts/mixins';
+
+@keyframes animateIn {
+  from {
+    transform: translate3d(-50%, -100%, 0px);
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(-50%, calc(3rem - 50%), 0px);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.pl-c-loader {
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin: auto;
+  max-width: $pl-space * 25;
+  width: calc(90vw - #{$pl-doublespace});
+  border-radius: $pl-border-radius;
+  background: rgba($pl-color-black, 0.9);
+  transform: translate3d(-50%, -100%, 0px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  pointer-events: none;
+  opacity: 0;
+  animation: animateIn ease 0.3s forwards;
+}
+
+.pl-c-loader__content {
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.pl-c-loader__message {
+  flex: 1;
+  padding: $pl-space;
+  font-size: $pl-font-size-sm-2;
+  color: $pl-color-white;
+}
+
+.pl-c-loader__spinner {
+  position: relative;
+  display: inline-block;
+  width: $pl-doublespace * 2;
+  height: $pl-doublespace;
+}
+
+.pl-c-loader-svg:not(:root) {
+  overflow: hidden;
+}
+
+.pl-c-loader-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(0);
+  animation: rotate 1s linear infinite;
+}
+
+.pl-c-loader-svg__outer-circle {
+  fill: none;
+  stroke: $pl-color-white;
+  stroke-width: 15;
+  stroke-miterlimit: 10;
+}
+
+.pl-c-loader-svg__inner-circle,
+.pl-c-loader-svg__electron {
+  fill: $pl-color-gray-20;
+}