Try to show the skeleton row

packages/x-data-grid-premium/src/components/GridAggregationRowOverlay.tsx

@@ -2,11 +2,7 @@ import * as React from 'react';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import {
-  gridRowsLoadingSelector,
-  getDataGridUtilityClass,
-  useGridRootProps,
-} from '@mui/x-data-grid-pro';
+import { getDataGridUtilityClass, useGridRootProps } from '@mui/x-data-grid-pro';
 import { GridSkeletonLoadingOverlayInner, useGridSelector } from '@mui/x-data-grid-pro/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors';
@@ -37,11 +33,7 @@ const GridAggregationRowOverlay = forwardRef<HTMLDivElement, React.HTMLAttribute
     const apiRef = useGridApiContext();
     const rootProps = useGridRootProps();
     const classes = useUtilityClasses({ classes: rootProps.classes });
-    const isLoading = useGridSelector(apiRef, gridRowsLoadingSelector);
     const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
-    if (!isLoading || Object.keys(aggregationModel).length === 0) {
-      return null;
-    }
 
     const visibleColumns = new Set(Object.keys(aggregationModel));
 

packages/x-data-grid-premium/src/components/GridPinnedRows.tsx

@@ -1,14 +1,22 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-data-grid-pro';
+import {
+  getDataGridUtilityClass,
+  gridClasses,
+  gridRowsLoadingSelector,
+  useGridSelector,
+  GRID_ROOT_GROUP_ID,
+} from '@mui/x-data-grid-pro';
 import {
   GridPinnedRowsProps,
   gridPinnedRowsSelector,
   gridRenderContextSelector,
-  useGridPrivateApiContext,
+  GRID_ID_AUTOGENERATED,
 } from '@mui/x-data-grid-pro/internals';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { GridAggregationRowOverlay } from './GridAggregationRowOverlay';
+import { gridAggregationLookupSelector } from '../hooks/features/aggregation/gridAggregationSelectors';
 
 const useUtilityClasses = () => {
   const slots = {
@@ -23,6 +31,8 @@ export function GridPinnedRows({ position, virtualScroller }: GridPinnedRowsProp
 
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const aggregationLookup = useGridSelector(apiRef, gridAggregationLookupSelector);
+  const isLoading = useGridSelector(apiRef, gridRowsLoadingSelector);
   const rows = pinnedRowsData[position];
 
   const pinnedRenderContext = React.useMemo(
@@ -45,10 +55,21 @@ export function GridPinnedRows({ position, virtualScroller }: GridPinnedRowsProp
     renderContext: pinnedRenderContext,
   });
 
+  const isAggregationRow =
+    position === 'bottom' && rows.length === 1 && rows[0].model[GRID_ID_AUTOGENERATED];
+
+  const isAggregationRowEmpty = (Object.values(aggregationLookup[GRID_ROOT_GROUP_ID]) || []).every(
+    ({ value }) => value === '',
+  );
+
+  if (isAggregationRow && isAggregationRowEmpty && !isLoading) {
+    return null;
+  }
+
   return (
     <div className={clsx(classes.root, gridClasses[`pinnedRows--${position}`])} role="presentation">
       {pinnedRows}
-      {position === 'bottom' && <GridAggregationRowOverlay />}
+      {isAggregationRow && isLoading && <GridAggregationRowOverlay />}
     </div>
   );
 }

packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts

@@ -196,10 +196,7 @@ export const addFooterRows = ({
   };
 
   const updateRootGroupFooter = (groupNode: GridGroupNode) => {
-    const shouldHaveFooter =
-      hasAggregationRule &&
-      getAggregationPosition(groupNode) === 'footer' &&
-      groupNode.children.length > 0;
+    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
 
     if (shouldHaveFooter) {
       const rowId = getAggregationFooterRowIdFromGroupId(null);