Fixed spinner alignment

#1531

Author: bmingles

packages/code-studio/src/styleguide/Tooltips.tsx

@@ -46,7 +46,7 @@ function Tooltips(): React.ReactElement {
           <hr />
           <div>And some icons down here</div>
           <div>
-            <LoadingSpinner />
+            <LoadingSpinner className="mimic-fa-layers-vertical-align" />
             {iconElements}
           </div>
         </Tooltip>

packages/components/scss/BaseStyleSheet.scss

@@ -180,6 +180,15 @@ span.btn-disabled-wrapper {
   }
 }
 
+.btn-spinner .loading-spinner,
+.mimic-fa-layers-vertical-align {
+  // The original LoadingSpinner used `.fa-layers` to create the spinner icon.
+  // This includes a vertical aligment adjustment to center the spinner along
+  // side of other inline content. Copying this value from the `.fa-layers`
+  // class to avoid breaking alignment of the new spinner.
+  vertical-align: -0.125em;
+}
+
 .btn-link.no-underline,
 .btn-link.no-underline:hover {
   text-decoration: none;

packages/components/src/LoadingSpinner.scss

@@ -16,19 +16,11 @@
   margin: 0 auto;
   width: var(--size);
   height: var(--size);
-
-  // The original LoadingSpinner used `.fa-layers` to create the spinner icon.
-  // This vertical-align value was copied from the `.fa-layers` class to avoid
-  // breaking alignment in existing usages such as `ContextActions` and
-  // `.btn-spinner`
-  vertical-align: -0.125em;
 }
 
 .loading-spinner-large {
   --border-width: 4px;
   --size: 56px;
-
-  vertical-align: 0;
 }
 
 // Spinning circle with colored border and transparent center. Half of the

packages/components/src/context-actions/ContextMenu.tsx

@@ -594,7 +594,7 @@ class ContextMenu extends PureComponent<ContextMenuProps, ContextMenuState> {
     if (pendingItems.length > 0) {
       pendingElement = (
         <div className="loading">
-          <LoadingSpinner />
+          <LoadingSpinner className="mimic-fa-layers-vertical-align" />
         </div>
       );
     }

packages/console/src/command-history/CommandHistoryItemTooltip.tsx

@@ -195,7 +195,7 @@ export class CommandHistoryItemTooltip extends Component<
               {hasTimeString ? (
                 <span className="time-string">{timeString}</span>
               ) : (
-                <LoadingSpinner />
+                <LoadingSpinner className="mimic-fa-layers-vertical-align" />
               )}
             </div>
           </div>

packages/iris-grid/src/ColumnStatistics.scss

@@ -77,3 +77,6 @@
   display: inline-block;
   color: $gray-400;
 }
+.column-statistics-loading .loading-spinner {
+  margin-right: 5px;
+}

packages/iris-grid/src/ColumnStatistics.tsx

@@ -258,7 +258,7 @@ class ColumnStatistics extends Component<
         )}
         {loading && (
           <div className="column-statistics-loading">
-            <LoadingSpinner className="mr-2" />
+            <LoadingSpinner className="mimic-fa-layers-vertical-align" />
             Calculating Stats...
           </div>
         )}

packages/iris-grid/src/IrisGridBottomBar.scss

@@ -52,7 +52,8 @@ $ease-out-bounce-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
     .btn {
       min-width: 10rem;
-      .svg-inline--fa {
+      .svg-inline--fa,
+      .loading-spinner {
         margin-right: 0.5rem;
       }
     }

packages/iris-grid/src/IrisGridCopyHandler.tsx

@@ -409,7 +409,9 @@ class IrisGridCopyHandler extends Component<
               onClick={this.handleCopyClick}
               disabled={isFetching}
             >
-              {isFetching && <LoadingSpinner />}
+              {isFetching && (
+                <LoadingSpinner className="mimic-fa-layers-vertical-align" />
+              )}
               {copyButtonText}
             </Button>
           </div>