feat: customize RefreshIndicator to work well on Datagrid and Gallery

Author: samuelreichert

packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss

@@ -2,6 +2,10 @@
     grid-column: 1 / -1;
     padding: 0;
     position: relative;
+
+    &-padding {
+        padding: var(--spacing-small) 0;
+    }
 }
 
 .mx-refresh-indicator {

packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx

@@ -1,3 +1,4 @@
+import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator";
 import { Pagination } from "@mendix/widget-plugin-grid/components/Pagination";
 import { KeyNavProvider } from "@mendix/widget-plugin-grid/keyboard-navigation/context";
 import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
@@ -86,6 +87,7 @@ export function Gallery<T extends ObjectItem>(props: GalleryProps<T>): ReactElem
         >
             <GalleryTopBar>{showTopPagination && pagination}</GalleryTopBar>
             {props.showHeader && <GalleryHeader aria-label={props.headerTitle}>{props.header}</GalleryHeader>}
+            <RefreshIndicator className="mx-refresh-container-padding" />
             <GalleryContent
                 hasMoreItems={props.hasMoreItems}
                 setPage={props.setPage}

packages/shared/widget-plugin-component-kit/src/RefreshIndicator.tsx

@@ -1,9 +1,14 @@
+import classNames from "classnames";
 import { createElement, ReactElement } from "react";
 
-export function RefreshIndicator(): ReactElement {
+type RefreshIndicatorProps = {
+    className?: string;
+};
+
+export function RefreshIndicator({ className }: RefreshIndicatorProps): ReactElement {
     return (
         <div className="tr" role="row">
-            <div className="th mx-refresh-container">
+            <div className={classNames("th mx-refresh-container", className)}>
                 <progress className="mx-refresh-indicator" />
             </div>
         </div>