[DST-504]: Sorting indicator is always shown in table (#4056)

* DST-504: hiding the sort indicator initially in table

* Create big-moons-pretend.md

* Update big-moons-pretend.md

.changeset/big-moons-pretend.md

@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+[DST-504]: Sorting indicator is shown only on sorted column.

packages/components/src/Table/TableColumnHeader.tsx

@@ -8,8 +8,7 @@ import { mergeProps } from '@react-aria/utils';
 import { GridNode } from '@react-types/grid';
 
 import { SortDown, SortUp } from '@marigold/icons';
-import { cn, useStateProps } from '@marigold/system';
-import { width as twWidth } from '@marigold/system';
+import { cn, width as twWidth, useStateProps } from '@marigold/system';
 
 import { useTableContext } from './Context';
 import { ColumnProps } from './Table';
@@ -64,7 +63,9 @@ export const TableColumnHeader = ({
             <SortDown className="inline-block" />
           )
         ) : (
-          <SortDown className="inline-block" />
+          <span className="invisible">
+            <SortDown className="inline-block" />
+          </span>
         ))}
     </th>
   );