Fleet UI: Remove elevated background on loading spinner (#49289)

changes/34984-spinner-elevated-background

@@ -0,0 +1 @@
+- Removed the elevated white background container from the loading spinner for a flatter, more consistent look.

frontend/components/LiveQuery/SelectTargets.tsx

@@ -482,7 +482,6 @@ const SelectTargets = ({
         <>
           <Spinner
             size="x-small"
-            includeContainer={false}
             centered={false}
             className={`${baseClass}__count-spinner`}
           />

frontend/components/Spinner/Spinner.tsx

@@ -12,8 +12,6 @@ interface ISpinnerProps {
   size?: Size;
   /** The size of the spinner padding. `"medium"` 120px (default), `"small"` 60px */
   verticalPadding?: PaddingSize;
-  /** Include the background container styling for the spinner. defaults: `true` */
-  includeContainer?: boolean;
   /** Center the spinner in its parent. defaults: `true` */
   centered?: boolean;
   className?: string;
@@ -34,7 +32,6 @@ const Spinner = ({
   white,
   size = "medium",
   verticalPadding = "medium",
-  includeContainer = true,
   centered = true,
   className,
   variant = undefined,
@@ -56,7 +53,6 @@ const Spinner = ({
     white,
     centered,
     "small-padding": verticalPadding === "small",
-    "include-container": includeContainer && variant !== "mobile",
     "mobile-view": variant === "mobile",
   });
   return (

frontend/components/Spinner/_styles.scss

@@ -16,14 +16,6 @@
     height: 100vh;
   }
 
-  &.include-container {
-    background-color: $core-fleet-white;
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    width: 48px;
-    height: 48px;
-  }
-
   .loader {
     position: relative;
     margin: 0 auto;

frontend/components/TableContainer/DataTable/SetupScriptStatusCell/SetupScriptStatusCell.tsx

@@ -36,7 +36,7 @@ const SetupScriptStatusCell = ({ status }: ISetupScriptStatusCell) => {
     <div className={baseClass}>
       <div className={`${baseClass}__icon`}>
         {icon === "spinner" ? (
-          <Spinner size="x-small" includeContainer={false} delay={0} />
+          <Spinner size="x-small" delay={0} />
         ) : (
           <Icon name={icon} />
         )}

frontend/components/TableContainer/DataTable/SetupSoftwareStatusCell/SetupSoftwareStatusCell.tsx

@@ -36,7 +36,7 @@ const SetupSoftwareStatusCell = ({ status }: ISetupSoftwareStatusCell) => {
     <div className={baseClass}>
       <div className={`${baseClass}__icon`}>
         {icon === "spinner" ? (
-          <Spinner size="x-small" includeContainer={false} delay={0} />
+          <Spinner size="x-small" delay={0} />
         ) : (
           <Icon name={icon} />
         )}

frontend/components/queries/LiveResults/LiveResultsHeading/LiveResultsHeading.tsx

@@ -142,7 +142,6 @@ const LiveResultsHeading = ({
             <Spinner
               size="x-small"
               centered={false}
-              includeContainer={false}
               className={`${baseClass}__responding-spinner`}
             />
           )}

frontend/pages/DashboardPage/DashboardPage.tsx

@@ -968,7 +968,7 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
         <div className={`${baseClass}__host-sections`}>
           {isHostSummaryFetching ? (
             <Card paddingSize="medium">
-              <Spinner includeContainer={false} verticalPadding="small" />
+              <Spinner verticalPadding="small" />
             </Card>
           ) : (
             HostCountCards

frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx

@@ -397,7 +397,7 @@ const ChartCard = ({
       );
     }
     if (isLoading) {
-      return <Spinner includeContainer={false} verticalPadding="small" />;
+      return <Spinner verticalPadding="small" />;
     }
     if (error) {
       return <DataError />;

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx

@@ -766,11 +766,7 @@ const EditIconModal = ({
       title="Edit appearance"
       onExit={onExitEditIconModal}
     >
-      {isFirstLoadWithCustomIcon ? (
-        <Spinner includeContainer={false} />
-      ) : (
-        renderForm()
-      )}
+      {isFirstLoadWithCustomIcon ? <Spinner /> : renderForm()}
       <ModalFooter
         primaryButtons={
           <Button

frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/LabelFilterSelect.tsx

@@ -78,7 +78,7 @@ const LoadingMenu = (
   return (
     <components.Menu {...props}>
       <div className={`${baseClass}__menu-loading`}>
-        <Spinner includeContainer={false} />
+        <Spinner />
       </div>
     </components.Menu>
   );

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -951,7 +951,7 @@ const DeviceUserPage = ({
               <div className="site-nav-item__logo-wrapper">
                 <div className="site-nav-item__logo">
                   {isLoadingDupDetails ? (
-                    <Spinner includeContainer={false} centered={false} />
+                    <Spinner centered={false} />
                   ) : (
                     <OrgLogoIcon className="logo" src={orgLogoURL} />
                   )}

frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx

@@ -575,12 +575,7 @@ const InstallStatusCell = ({
       >
         {(isSelfService || isHostOnline) &&
         displayConfig.iconName === "pending-outline" ? (
-          <Spinner
-            size="x-small"
-            includeContainer={false}
-            centered={false}
-            delay={0}
-          />
+          <Spinner size="x-small" centered={false} delay={0} />
         ) : (
           displayConfig?.iconName && (
             <Icon

frontend/pages/hosts/details/cards/Software/SelfService/components/TileActionStatus/TileActionStatus.tsx

@@ -96,12 +96,7 @@ const TileActionStatus = ({
   const renderActiveActionStatus = () => {
     return (
       <>
-        <Spinner
-          size="x-small"
-          includeContainer={false}
-          centered={false}
-          delay={0}
-        />
+        <Spinner size="x-small" centered={false} delay={0} />
         {getPendingOrRunningLabel(software.ui_status)}
       </>
     );

frontend/pages/hosts/details/cards/Software/SelfService/components/UpdatesCard/UpdateSoftwareItem/UpdateSoftwareItem.tsx

@@ -118,12 +118,7 @@ const InstallerStatus = ({
       >
         <div className={`${baseClass}__status-with-tooltip`}>
           {displayConfig.iconName === "pending-outline" && (
-            <Spinner
-              size="x-small"
-              includeContainer={false}
-              centered={false}
-              delay={0}
-            />
+            <Spinner size="x-small" centered={false} delay={0} />
           )}
           {last_install && displayConfig.displayText === "Failed" && (
             <span data-testid={`${baseClass}__status--test`}>
@@ -176,13 +171,7 @@ const InstallerStatusAction = ({
     if (ui_status === "updating") {
       return (
         <>
-          <Spinner
-            size="x-small"
-            includeContainer={false}
-            centered={false}
-            delay={0}
-          />{" "}
-          Updating...{" "}
+          <Spinner size="x-small" centered={false} delay={0} /> Updating...{" "}
         </>
       );
     }