feat: add support for loader when pulling in code snippets in the Drawer

Author: sghoweri

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

@@ -1,17 +1,6 @@
 @import 'scss/01-abstracts/variables';
 @import 'scss/01-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);
@@ -21,21 +10,34 @@
   }
 }
 
+.pl-c-loader-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.pl-c-loader-wrapper:not(:last-child){
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
 .pl-c-loader {
   z-index: 1000;
   position: absolute;
-  top: 0;
+  top: 50%;
   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);
+  transform: translate3d(-50%, -50%, 0px);
   transition: opacity 0.3s ease, transform 0.3s ease;
   pointer-events: none;
-  opacity: 0;
-  animation: animateIn ease 0.3s forwards;
+  opacity: 1;
 }
 
 .pl-c-loader__content {

packages/uikit-workshop/src/scripts/components/modal-viewer.js

@@ -167,7 +167,9 @@ export const modalViewer = {
 
       // Clear out any existing children before appending the new panel content
       if (contentContainer.firstChild !== null) {
-        contentContainer.removeChild(contentContainer.firstChild);
+        while(contentContainer.firstChild !== null){
+          contentContainer.removeChild(contentContainer.firstChild);
+        }
       }
 
       contentContainer.appendChild(templateRendered);

packages/uikit-workshop/src/scripts/components/pl-drawer/pl-drawer.js

@@ -36,6 +36,10 @@ class Drawer extends LitElement {
         attribute: true,
         type: Boolean,
       },
+      themeMode: {
+        attribute: true,
+        type: String,
+      },
     };
   }
 
@@ -117,7 +121,35 @@ class Drawer extends LitElement {
                 </pl-button>
               </div>
             </div>
-            <div class="pl-c-drawer__content pl-js-drawer-content"></div>
+            <div class="pl-c-drawer__content pl-js-drawer-content">
+              <div class="pl-c-loader-wrapper pl-c-body--theme-${this.themeMode}">
+                <div class="pl-c-loader">
+                  <div class="pl-c-loader__content">
+                    <div class="pl-c-loader__message">Loading Code Panel</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.2C240.3,28.1,253,40.7,253,56.3z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -143,6 +175,10 @@ class Drawer extends LitElement {
   }
 
   _stateChanged(state) {
+    if (this.themeMode !== state.app.themeMode) {
+      this.themeMode = state.app.themeMode || 'dark';
+    }
+
     if (this.drawerOpened !== state.app.drawerOpened) {
       this.drawerOpened = state.app.drawerOpened;
     }