(superset) 01/01: fix(dashboard): mute the Group By display control loading spinner

[jl...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

sadpandajoe pushed a commit to branch fix-group-by-display-control-spinner-muted
in repository https://gitbox.apache.org/repos/asf/superset.git

commit c6f9d0b210908a1ce978c2780c88d37077592783
Author: sadpandajoe <jc...@gmail.com>
AuthorDate: Fri Aug 7 05:11:22 2026 +0000

    fix(dashboard): mute the Group By display control loading spinner
    
    The Group By display control in the dashboard filter bar rendered its
    column-loading spinner at full opacity and medium size, which is visually
    heavy for an inline secondary loading state. Render it with the small,
    muted Loading variant (40px, 0.25 opacity) to match the light-grey style
    expected for inline loading affordances.
    
    Adds a regression test that pins the card in its column-loading state and
    asserts the spinner is rendered small and muted.
    
    Co-Authored-By: Claude Fable 5 <no...@anthropic.com>
---
 .../FilterControls/GroupByFilterCard.test.tsx      | 38 +++++++++++++++++++++-
 .../FilterBar/FilterControls/GroupByFilterCard.tsx |  2 +-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.test.tsx
index ba128d56dc0..79fc8322235 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.test.tsx
@@ -16,8 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import {
+  ChartCustomizationType,
+  type ChartCustomization,
+} from '@superset-ui/core';
 import { LabeledValue } from '@superset-ui/core/components';
-import { createLabelSortComparator } from './GroupByFilterCard';
+import { render, screen } from 'spec/helpers/testing-library';
+import GroupByFilterCard, {
+  createLabelSortComparator,
+} from './GroupByFilterCard';
+
+jest.mock('src/utils/cachedSupersetGet', () => ({
+  // Never resolves, pinning the card in its column-loading state.
+  cachedSupersetGet: jest.fn(() => new Promise(() => {})),
+}));
 
 const apple: LabeledValue = { value: 'a', label: 'Apple' };
 const banana: LabeledValue = { value: 'b', label: 'Banana' };
@@ -39,3 +51,27 @@ test('preserves source order when sortAscending is unset', () => {
   expect(compare(apple, banana)).toBe(0);
   expect(compare(banana, apple)).toBe(0);
 });
+
+const groupByCustomization = {
+  id: 'groupby-1',
+  name: 'Group By',
+  filterType: 'filter_groupby',
+  type: ChartCustomizationType.ChartCustomization,
+  targets: [{ datasetId: 1 }],
+  scope: { rootPath: [], excluded: [] },
+  controlValues: {},
+  defaultDataMask: {},
+} as unknown as ChartCustomization;
+
+test('renders the column-loading spinner small and muted', async () => {
+  render(<GroupByFilterCard customizationItem={groupByCustomization} />, {
+    useRedux: true,
+    initialState: {
+      dataMask: {},
+      nativeFilters: { filters: {} },
+    },
+  });
+  const spinner = await screen.findByTestId('loading-indicator');
+  expect(spinner).toHaveClass('inline');
+  expect(spinner).toHaveStyle({ opacity: 0.25, width: '40px' });
+});
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.tsx
index d214be3d786..7363dfcab68 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/GroupByFilterCard.tsx
@@ -645,7 +645,7 @@ const GroupByFilterCard: FC<GroupByFilterCardProps> = ({
 
       {loading && (
         <div style={{ textAlign: 'center', marginTop: 8 }}>
-          <Loading position="inline" />
+          <Loading position="inline" size="s" muted />
         </div>
       )}
     </div>