[MOO-2218]: Fix gallery-native load and render (#429)

Author: NikolaSimsic

packages/pluggableWidgets/gallery-native/CHANGELOG.md

@@ -6,11 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We've fixed an issue with a race condition where the Gallery widget would not consistently render items when using virtual scrolling in arbitrary scenarios.
+
 ## [2.0.1] - 2025-10-17
 
 ### Fixed
 
--  We've fixed an issue where the Gallery widget would not properly load more items when scrolling down quickly.
+-   We've fixed an issue where the Gallery widget would not properly load more items when scrolling down quickly.
 
 ## [2.0.0] - 2024-12-3
 

packages/pluggableWidgets/gallery-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gallery-native",
   "widgetName": "Gallery",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",

packages/pluggableWidgets/gallery-native/src/Gallery.tsx

@@ -1,5 +1,5 @@
 import { all } from "deepmerge";
-import { createElement, ReactElement, useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { createElement, ReactElement, useCallback, useEffect, useMemo, useState, useRef, Fragment } from "react";
 import {
     executeAction,
     FilterType,
@@ -13,7 +13,7 @@ import { extractFilters } from "./utils/filters";
 import { FilterCondition } from "mendix/filters";
 import { Gallery as GalleryComponent, GalleryProps as GalleryComponentProps } from "./components/Gallery";
 import { GalleryProps } from "../typings/GalleryProps";
-import { ObjectItem } from "mendix";
+import { ObjectItem, ValueStatus } from "mendix";
 
 export const Gallery = (props: GalleryProps<GalleryStyle>): ReactElement => {
     const viewStateFilters = useRef<FilterCondition | undefined>(undefined);
@@ -49,6 +49,7 @@ export const Gallery = (props: GalleryProps<GalleryStyle>): ReactElement => {
                 }),
                 {}
             ),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [props.filterList, viewStateFilters.current]
     );
 
@@ -103,6 +104,10 @@ export const Gallery = (props: GalleryProps<GalleryStyle>): ReactElement => {
         [FilterContext, customFiltersState, filterList, initialFilters, isFilterable, props.filtersPlaceholder]
     );
 
+    if (props.datasource.status === ValueStatus.Loading && props.datasource.items === undefined) {
+        return <Fragment />;
+    }
+
     return (
         <GalleryComponent
             emptyPlaceholder={props.emptyPlaceholder}

packages/pluggableWidgets/gallery-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Gallery" version="2.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Gallery" version="2.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Gallery.xml" />
         </widgetFiles>