Added placeholder animation to clone.html

Alchemik · Sep 9, 2020 · 06a711c · 06a711c
1 parent 233373f
commit 06a711c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/popups/clone.html b/popups/clone.html
@@ -5,6 +5,12 @@
   <title>Open project in JetBrains IDEs</title>
   <link rel="stylesheet" href="popup.css">
   <style>
+    @keyframes placeholder-animation {
+      0%,
+      100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+
     body {
       padding-left: 0;
       padding-right: 0;
@@ -119,6 +125,29 @@
     .protocol + .tool-actions {
       margin-top: 0.5rem;
     }
+
+    .tool-action_placeholder .tool-action__icon,
+    .tool-action_placeholder .tool-action__tool,
+    .tool-action_placeholder .tool-action__project {
+      border-radius: 100rem;
+      color: transparent;
+      animation: 1.5s ease-in-out 0s infinite normal running placeholder-animation;
+      background: linear-gradient(to right, #eee 2%, #ddd 18%, #eee 33%);
+      background-size: 500px;
+      -moz-user-select: none;
+      user-select: none;
+    }
+
+    .tool-action_placeholder .tool-action__tool {
+      width: 5.4rem;
+      height: 0.82rem;
+    }
+
+    .tool-action_placeholder .tool-action__project {
+      width: 8.8rem;
+      height: 0.5rem;
+      margin-top: 0.5rem;
+    }
   </style>
 </head>
 
@@ -139,7 +168,15 @@
       value="SSH"
     ><label for="radSsh" class="protocol__text">Clone with SSH</label>
   </div>
-  <div class="tool-actions js-tool-actions"></div>
+  <div class="tool-actions js-tool-actions">
+    <div class="tool-action tool-action_placeholder js-tool-action-placeholder">
+      <div class="tool-action__icon"></div>
+      <div class="tool-action__text">
+        <div class="tool-action__tool"></div>
+        <div class="tool-action__project"></div>
+      </div>
+    </div>
+  </div>
   <script src="jetbrains-toolbox-clone-popup.js"></script>
 </body>
 

diff --git a/popups/clone.js b/popups/clone.js
@@ -78,6 +78,7 @@ chrome.tabs.query({active: true, currentWindow: true}, tabs => {
     tools.forEach(tool => {
       fragment.append(createOpenToolAction(tool, query.project, query.https, query.ssh));
     });
+    document.querySelector('.js-tool-action-placeholder').remove();
     document.querySelector('.js-tool-actions').append(fragment);
   });
 });