Issue #3392337 by agami4: Add throbber icon to the enroll button on the event page

assets/css/hero--sky.css

@@ -534,8 +534,8 @@
 [dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-date-advanced, [dir='rtl']
 .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-location-address {
   -webkit-box-pack: end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
 }
 
 .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .article__special-fields-icon {
@@ -557,6 +557,60 @@
   min-width: 195px;
 }
 
+.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-enroll-for-this-event'][disabled]:not(.is-disabled), .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-feedback-user-has-enrolled'][disabled]:not(.is-disabled) {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-enroll-for-this-event'][disabled]:not(.is-disabled):after, .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-feedback-user-has-enrolled'][disabled]:not(.is-disabled):after {
+  content: '';
+  margin-left: 8px;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url("../../components/04-organisms/hero/icons/icon-autorenew.svg") no-repeat center/16px 16px;
+  -webkit-animation: glyphicon-spin 1s infinite linear;
+          animation: glyphicon-spin 1s infinite linear;
+}
+
+@-webkit-keyframes glyphicon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes glyphicon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-enroll-for-this-event'] {
+  min-width: 250px;
+}
+
+.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-feedback-user-has-enrolled'] {
+  width: 100%;
+}
+
 .socialblue--sky main:not(.is-navbar-secondary) .hero__banner--static .hero-footer {
   padding-bottom: 1.25rem;
 }
@@ -842,8 +896,8 @@
   [dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-date-advanced, [dir='rtl']
   .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-location-address {
     -webkit-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
   }
   .socialblue--sky.path-group .cover-wrap:not(.cover-wrap--course-statistic) .page-title {
     display: -webkit-box;

components/04-organisms/hero/hero--sky.scss

@@ -732,6 +732,43 @@
 
         &:not(#edit-decline-invite) {
           min-width: 195px;
+
+          &[data-drupal-selector='edit-enroll-for-this-event'],
+          &[data-drupal-selector='edit-feedback-user-has-enrolled'] {
+            &[disabled]:not(.is-disabled) {
+              position: relative;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              &:after {
+                content: '';
+                margin-left: 8px;
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                background: url('../../components/04-organisms/hero/icons/icon-autorenew.svg') no-repeat center/16px 16px;
+                animation: glyphicon-spin 1s infinite linear;
+              }
+
+              @keyframes glyphicon-spin {
+                0% {
+                  transform: rotate(0deg);
+                }
+                100% {
+                  transform: rotate(359deg);
+                }
+              }
+            }
+          }
+
+          &[data-drupal-selector='edit-enroll-for-this-event'] {
+            min-width: 250px;
+          }
+
+          &[data-drupal-selector='edit-feedback-user-has-enrolled'] {
+            width: 100%;
+          }
         }
       }
     }

components/04-organisms/hero/icons/icon-autorenew.svg

+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" fill="#343434" ><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8A5.87 5.87 0 0 1 6 12c0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></svg>