From 56a4b982073cb532662f828ae64a6cd212637dff Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 28 Jul 2025 15:31:15 +0200 Subject: [PATCH 01/12] feat(gallery-web): add refresh indicator property to gallery --- packages/pluggableWidgets/gallery-web/src/Gallery.xml | 4 ++++ .../pluggableWidgets/gallery-web/typings/GalleryProps.d.ts | 2 ++ 2 files changed, 6 insertions(+) diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.xml b/packages/pluggableWidgets/gallery-web/src/Gallery.xml index c613422fa9..bc0250c444 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.xml +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.xml @@ -94,6 +94,10 @@ Load More + + Show refresh indicator + Show a refresh indicator when the data is being loaded. + diff --git a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts index a1cd505ccb..940cea18a6 100644 --- a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts +++ b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts @@ -39,6 +39,7 @@ export interface GalleryContainerProps { showPagingButtons: ShowPagingButtonsEnum; pagingPosition: PagingPositionEnum; loadMoreButtonCaption?: DynamicValue; + refreshIndicator: boolean; showEmptyPlaceholder: ShowEmptyPlaceholderEnum; emptyPlaceholder?: ReactNode; itemClass?: ListExpressionValue; @@ -80,6 +81,7 @@ export interface GalleryPreviewProps { showPagingButtons: ShowPagingButtonsEnum; pagingPosition: PagingPositionEnum; loadMoreButtonCaption: string; + refreshIndicator: boolean; showEmptyPlaceholder: ShowEmptyPlaceholderEnum; emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; itemClass: string; From 2fde59580c2a0a792475d88e0be6471cb4b7c553 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Wed, 6 Aug 2025 16:46:00 +0200 Subject: [PATCH 02/12] feat: move RefreshIndicator to component kit --- .../datawidgets/web/_datagrid.scss | 80 ------------------- .../datawidgets/web/_refresh-indicator.scss | 79 ++++++++++++++++++ .../src/themesource/datawidgets/web/main.scss | 1 + .../src}/RefreshIndicator.tsx | 4 +- 4 files changed, 82 insertions(+), 82 deletions(-) create mode 100644 packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss rename packages/{pluggableWidgets/datagrid-web/src/components => shared/widget-plugin-component-kit/src}/RefreshIndicator.tsx (58%) diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss index 9159447bd4..e311d2e0d9 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss @@ -429,86 +429,6 @@ $root: ".widget-datagrid"; display: contents; } - &-refresh-container { - grid-column: 1 / -1; - padding: 0; - position: relative; - } - - &-refresh-indicator { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: var(--border-color-default, #ced0d3); - border: none; - border-radius: 2px; - color: var(--brand-primary, $dg-brand-primary); - height: 4px; - width: 100%; - position: absolute; - left: 0; - right: 0; - - &::-webkit-progress-bar { - background-color: transparent; - } - - &::-webkit-progress-value { - background-color: currentColor; - transition: all 0.2s; - } - - &::-moz-progress-bar { - background-color: currentColor; - transition: all 0.2s; - } - - &::-ms-fill { - border: none; - background-color: currentColor; - transition: all 0.2s; - } - - &:indeterminate { - background-size: 200% 100%; - background-image: linear-gradient( - to right, - transparent 50%, - currentColor 50%, - currentColor 60%, - transparent 60%, - transparent 71.5%, - currentColor 71.5%, - currentColor 84%, - transparent 84% - ); - animation: progress-linear 3s infinite linear; - } - - &:indeterminate::-moz-progress-bar { - background-color: transparent; - } - - &:indeterminate::-ms-fill { - animation-name: none; - } - - @keyframes progress-linear { - 0% { - background-size: 200% 100%; - background-position: left -31.25% top 0%; - } - 50% { - background-size: 800% 100%; - background-position: left -49% top 0%; - } - 100% { - background-size: 400% 100%; - background-position: left -102% top 0%; - } - } - } - &.widget-datagrid-selection-method-click { .tr.tr-selected .td { background-color: $dg-grid-selected-row-background; diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss new file mode 100644 index 0000000000..e550063e4f --- /dev/null +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss @@ -0,0 +1,79 @@ +.mx-refresh-container { + grid-column: 1 / -1; + padding: 0; + position: relative; +} + +.mx-refresh-indicator { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: var(--border-color-default, #ced0d3); + border: none; + border-radius: 2px; + color: var(--brand-primary, $dg-brand-primary); + height: 4px; + width: 100%; + position: absolute; + left: 0; + right: 0; + + &::-webkit-progress-bar { + background-color: transparent; + } + + &::-webkit-progress-value { + background-color: currentColor; + transition: all 0.2s; + } + + &::-moz-progress-bar { + background-color: currentColor; + transition: all 0.2s; + } + + &::-ms-fill { + border: none; + background-color: currentColor; + transition: all 0.2s; + } + + &:indeterminate { + background-size: 200% 100%; + background-image: linear-gradient( + to right, + transparent 50%, + currentColor 50%, + currentColor 60%, + transparent 60%, + transparent 71.5%, + currentColor 71.5%, + currentColor 84%, + transparent 84% + ); + animation: progress-linear 3s infinite linear; + } + + &:indeterminate::-moz-progress-bar { + background-color: transparent; + } + + &:indeterminate::-ms-fill { + animation-name: none; + } + + @keyframes progress-linear { + 0% { + background-size: 200% 100%; + background-position: left -31.25% top 0%; + } + 50% { + background-size: 800% 100%; + background-position: left -49% top 0%; + } + 100% { + background-size: 400% 100%; + background-position: left -102% top 0%; + } + } +} diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss index 19fbcb8846..c1d5304319 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss +++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/main.scss @@ -6,6 +6,7 @@ @import "drop-down-sort"; @import "gallery"; @import "gallery-design-properties"; +@import "refresh-indicator"; @import "three-state-checkbox"; @import "tree-node"; @import "tree-node-design-properties"; diff --git a/packages/pluggableWidgets/datagrid-web/src/components/RefreshIndicator.tsx b/packages/shared/widget-plugin-component-kit/src/RefreshIndicator.tsx similarity index 58% rename from packages/pluggableWidgets/datagrid-web/src/components/RefreshIndicator.tsx rename to packages/shared/widget-plugin-component-kit/src/RefreshIndicator.tsx index 79f3f3a10f..84711d5358 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/RefreshIndicator.tsx +++ b/packages/shared/widget-plugin-component-kit/src/RefreshIndicator.tsx @@ -3,8 +3,8 @@ import { createElement, ReactElement } from "react"; export function RefreshIndicator(): ReactElement { return (
-
- +
+
); From ea4934c444956cc2ca5b17b843cfe8358992c205 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Wed, 6 Aug 2025 16:46:32 +0200 Subject: [PATCH 03/12] feat(datagrid-web): use RefreshIndicator from the component kit --- .../pluggableWidgets/datagrid-web/src/components/Widget.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx index f169d66fa8..f94ad45f91 100644 --- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx +++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx @@ -1,3 +1,4 @@ +import { RefreshIndicator } from "@mendix/widget-plugin-component-kit/RefreshIndicator"; import { Pagination } from "@mendix/widget-plugin-grid/components/Pagination"; import { SelectionStatus } from "@mendix/widget-plugin-grid/selection"; import classNames from "classnames"; @@ -25,7 +26,6 @@ import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navig import { observer } from "mobx-react-lite"; import { RowsRenderer } from "./RowsRenderer"; import { GridHeader } from "./GridHeader"; -import { RefreshIndicator } from "./RefreshIndicator"; export interface WidgetProps { CellComponent: CellComponent; From 3fc471aace6a08b27717d4afeeb2064dd6fcb421 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 7 Aug 2025 11:34:31 +0200 Subject: [PATCH 04/12] feat: customize RefreshIndicator to work well on Datagrid and Gallery --- .../themesource/datawidgets/web/_refresh-indicator.scss | 4 ++++ .../gallery-web/src/components/Gallery.tsx | 2 ++ .../widget-plugin-component-kit/src/RefreshIndicator.tsx | 9 +++++++-- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss index e550063e4f..8213ceab85 100644 --- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_refresh-indicator.scss +++ b/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 { diff --git a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx index 485e00f053..0a4cd24882 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx +++ b/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(props: GalleryProps): ReactElem > {showTopPagination && pagination} {props.showHeader && {props.header}} + -
+
From 15e1ae0fc1162c394a7f5259fac9bff0762355c3 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 7 Aug 2025 11:35:08 +0200 Subject: [PATCH 05/12] fix: broken build on Gallery due to new refreshIndicator property --- packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx b/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx index 3d53682d85..b2079547b7 100644 --- a/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx +++ b/packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx @@ -55,7 +55,8 @@ export function createMockGalleryContext(): GalleryRootScope { onClickTrigger: "single", stateStorageType: "localStorage", storeFilters: false, - storeSort: false + storeSort: false, + refreshIndicator: false }; // Create a proper gate provider and gate From 3e1f6b44015d59a898121bcd102b74152b47e353 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Fri, 8 Aug 2025 17:12:36 +0200 Subject: [PATCH 06/12] feat(gallery-web): create a DerivedLoaderController for gallery --- .../controllers/DerivedLoaderController.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts diff --git a/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts b/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts new file mode 100644 index 0000000000..c166f0eec2 --- /dev/null +++ b/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts @@ -0,0 +1,25 @@ +type DerivedLoaderControllerSpec = { + refreshIndicator: boolean; + query: { + isRefreshing: boolean; + isSilentRefresh: boolean; + }; +}; + +export class DerivedLoaderController { + constructor(private spec: DerivedLoaderControllerSpec) {} + + get isRefreshing(): boolean { + const { isSilentRefresh, isRefreshing } = this.spec.query; + + return !isSilentRefresh && isRefreshing; + } + + get showRefreshIndicator(): boolean { + if (!this.spec.refreshIndicator) { + return false; + } + + return this.isRefreshing; + } +} From b5f444da5eeae3ca22285c38751c7718aa242453 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Fri, 8 Aug 2025 17:13:14 +0200 Subject: [PATCH 07/12] feat(gallery-web): add refreshIndicator to gallery component --- .../gallery-web/src/Gallery.editorPreview.tsx | 1 + .../pluggableWidgets/gallery-web/src/components/Gallery.tsx | 3 ++- .../pluggableWidgets/gallery-web/src/utils/test-utils.tsx | 6 ++++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx index e6471a9e03..13ca8e18cf 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx @@ -104,6 +104,7 @@ function Preview(props: GalleryPreviewProps): ReactElement { itemEventsController={itemEventsController} focusController={focusController} getPosition={getPositionCallback} + showRefreshIndicator={false} preview /> ); diff --git a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx index 0a4cd24882..9407dafaf8 100644 --- a/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-web/src/components/Gallery.tsx @@ -52,6 +52,7 @@ export interface GalleryProps { selectHelper: SelectActionHandler; getPosition: (index: number) => PositionInGrid; loadMoreButtonCaption?: string; + showRefreshIndicator: boolean; } export function Gallery(props: GalleryProps): ReactElement { @@ -87,7 +88,7 @@ export function Gallery(props: GalleryProps): ReactElem > {showTopPagination && pagination} {props.showHeader && {props.header}} - + {props.showRefreshIndicator ? : null} , itemEventsController, focusController, - getPosition: (index: number) => getColumnAndRowBasedOnIndex(3, 3, index) + getPosition: (index: number) => getColumnAndRowBasedOnIndex(3, 3, index), + showRefreshIndicator: false }; } From 573ef496224d194cf0917f1469df1f3ac9691697 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Fri, 8 Aug 2025 17:14:11 +0200 Subject: [PATCH 08/12] feat(gallery-web): implement loader controller on gallery store --- .../gallery-web/src/stores/GalleryStore.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts b/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts index 59417e1e73..749a441770 100644 --- a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts +++ b/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts @@ -11,6 +11,7 @@ import { SortAPI } from "@mendix/widget-plugin-sorting/react/context"; import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost"; import { EditableValue, ListValue } from "mendix"; import { PaginationEnum, StateStorageTypeEnum } from "../../typings/GalleryProps"; +import { DerivedLoaderController } from "../controllers/DerivedLoaderController"; import { QueryParamsController } from "../controllers/QueryParamsController"; import { ObservableStorage } from "../typings/storage"; import { AttributeStorage } from "./AttributeStorage"; @@ -31,6 +32,7 @@ interface StaticProps { stateStorageType: StateStorageTypeEnum; storeFilters: boolean; storeSort: boolean; + refreshIndicator: boolean; } export type GalleryPropsGate = DerivedPropsGate; @@ -50,6 +52,7 @@ export class GalleryStore extends BaseControllerHost { readonly paging: PaginationController; readonly filterAPI: FilterAPI; readonly sortAPI: SortAPI; + loaderCtrl: DerivedLoaderController; constructor(spec: GalleryStoreSpec) { super(); @@ -86,6 +89,14 @@ export class GalleryStore extends BaseControllerHost { host: this._sortHost }; + this.loaderCtrl = new DerivedLoaderController({ + refreshIndicator: spec.refreshIndicator, + query: { + isRefreshing: this._query.isRefreshing, + isSilentRefresh: this._query.isSilentRefresh + } + }); + new RefreshController(this, { delay: 0, query: this._query.derivedQuery From 935c9c6987017119019db05164a75cc967ab9612 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 11 Aug 2025 11:34:48 +0200 Subject: [PATCH 09/12] feat(gallery-web): fix derivedLoader to correctly update isRefreshing --- .../gallery-web/src/Gallery.tsx | 1 + .../controllers/DerivedLoaderController.ts | 28 +++++++++---------- .../gallery-web/src/stores/GalleryStore.ts | 8 +----- 3 files changed, 15 insertions(+), 22 deletions(-) diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx index 37e665ed95..d769ffbc1e 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.tsx +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.tsx @@ -91,6 +91,7 @@ const Container = observer(function GalleryContainer(props: GalleryContainerProp focusController={focusController} getPosition={getPositionCallback} loadMoreButtonCaption={props.loadMoreButtonCaption?.value} + showRefreshIndicator={rootStore.loaderCtrl.showRefreshIndicator} /> ); }); diff --git a/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts b/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts index c166f0eec2..cafc6ba351 100644 --- a/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts +++ b/packages/pluggableWidgets/gallery-web/src/controllers/DerivedLoaderController.ts @@ -1,25 +1,23 @@ -type DerivedLoaderControllerSpec = { - refreshIndicator: boolean; - query: { - isRefreshing: boolean; - isSilentRefresh: boolean; - }; -}; +import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController"; +import { makeObservable, computed } from "mobx"; export class DerivedLoaderController { - constructor(private spec: DerivedLoaderControllerSpec) {} + constructor( + private datasourceController: DatasourceController, + private refreshIndicator: boolean + ) { + makeObservable(this, { + isRefreshing: computed, + showRefreshIndicator: computed + }); + } get isRefreshing(): boolean { - const { isSilentRefresh, isRefreshing } = this.spec.query; - + const { isSilentRefresh, isRefreshing } = this.datasourceController; return !isSilentRefresh && isRefreshing; } get showRefreshIndicator(): boolean { - if (!this.spec.refreshIndicator) { - return false; - } - - return this.isRefreshing; + return this.refreshIndicator && this.isRefreshing; } } diff --git a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts b/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts index 749a441770..e0ab4c84f0 100644 --- a/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts +++ b/packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts @@ -89,13 +89,7 @@ export class GalleryStore extends BaseControllerHost { host: this._sortHost }; - this.loaderCtrl = new DerivedLoaderController({ - refreshIndicator: spec.refreshIndicator, - query: { - isRefreshing: this._query.isRefreshing, - isSilentRefresh: this._query.isSilentRefresh - } - }); + this.loaderCtrl = new DerivedLoaderController(this._query, spec.refreshIndicator); new RefreshController(this, { delay: 0, From fd2424963d57dc1a28a976cee761d1dac9fd450d Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 21 Aug 2025 10:46:50 +0200 Subject: [PATCH 10/12] chore(gallery-web): change refresh indicator property to general group --- packages/pluggableWidgets/gallery-web/src/Gallery.xml | 8 ++++---- .../gallery-web/typings/GalleryProps.d.ts | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/pluggableWidgets/gallery-web/src/Gallery.xml b/packages/pluggableWidgets/gallery-web/src/Gallery.xml index bc0250c444..5853598503 100644 --- a/packages/pluggableWidgets/gallery-web/src/Gallery.xml +++ b/packages/pluggableWidgets/gallery-web/src/Gallery.xml @@ -37,6 +37,10 @@ Content placeholder + + Show refresh indicator + Show a refresh indicator when the data is being loaded. + @@ -94,10 +98,6 @@ Load More - - Show refresh indicator - Show a refresh indicator when the data is being loaded. - diff --git a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts index 940cea18a6..2f32acbdc7 100644 --- a/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts +++ b/packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts @@ -30,6 +30,7 @@ export interface GalleryContainerProps { itemSelection?: SelectionSingleValue | SelectionMultiValue; itemSelectionMode: ItemSelectionModeEnum; content?: ListWidgetValue; + refreshIndicator: boolean; desktopItems: number; tabletItems: number; phoneItems: number; @@ -39,7 +40,6 @@ export interface GalleryContainerProps { showPagingButtons: ShowPagingButtonsEnum; pagingPosition: PagingPositionEnum; loadMoreButtonCaption?: DynamicValue; - refreshIndicator: boolean; showEmptyPlaceholder: ShowEmptyPlaceholderEnum; emptyPlaceholder?: ReactNode; itemClass?: ListExpressionValue; @@ -72,6 +72,7 @@ export interface GalleryPreviewProps { itemSelection: "None" | "Single" | "Multi"; itemSelectionMode: ItemSelectionModeEnum; content: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; + refreshIndicator: boolean; desktopItems: number | null; tabletItems: number | null; phoneItems: number | null; @@ -81,7 +82,6 @@ export interface GalleryPreviewProps { showPagingButtons: ShowPagingButtonsEnum; pagingPosition: PagingPositionEnum; loadMoreButtonCaption: string; - refreshIndicator: boolean; showEmptyPlaceholder: ShowEmptyPlaceholderEnum; emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> }; itemClass: string; From 2df8f8e93f36bfc86e24782ada992e2a1a08c297 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 21 Aug 2025 15:25:42 +0200 Subject: [PATCH 11/12] chore(gallery-web): update changelog --- packages/pluggableWidgets/gallery-web/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/pluggableWidgets/gallery-web/CHANGELOG.md b/packages/pluggableWidgets/gallery-web/CHANGELOG.md index 07d419d898..04c091a039 100644 --- a/packages/pluggableWidgets/gallery-web/CHANGELOG.md +++ b/packages/pluggableWidgets/gallery-web/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Added + +- We implemented a new property to show a refresh indicator. With the refresh indicator, any datasource change shows a progress bar on top of Gallery. + ## [3.2.0] - 2025-08-18 ### Changed From 7914682664dbdbc6cb1c0286b94f15f1bf5a0181 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Thu, 21 Aug 2025 15:25:58 +0200 Subject: [PATCH 12/12] chore(gallery-web): bump version --- packages/pluggableWidgets/gallery-web/package.json | 2 +- packages/pluggableWidgets/gallery-web/src/package.xml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pluggableWidgets/gallery-web/package.json b/packages/pluggableWidgets/gallery-web/package.json index 70c2de87a9..97cfa5a144 100644 --- a/packages/pluggableWidgets/gallery-web/package.json +++ b/packages/pluggableWidgets/gallery-web/package.json @@ -1,7 +1,7 @@ { "name": "@mendix/gallery-web", "widgetName": "Gallery", - "version": "3.2.0", + "version": "3.3.0", "description": "A flexible gallery widget that renders columns, rows and layouts.", "copyright": "© Mendix Technology BV 2025. All rights reserved.", "license": "Apache-2.0", diff --git a/packages/pluggableWidgets/gallery-web/src/package.xml b/packages/pluggableWidgets/gallery-web/src/package.xml index 475b88a325..60ea4b4d8a 100644 --- a/packages/pluggableWidgets/gallery-web/src/package.xml +++ b/packages/pluggableWidgets/gallery-web/src/package.xml @@ -1,6 +1,6 @@ - +