@plusscommunities/pluss-maintenance-web-feedback 1.1.37-beta.0 → 1.1.37-beta.1

package/dist/index.cjs.js

@@ -811,12 +811,26 @@ class JobList extends React.Component {
       return params;
     });
     /**
-     * Minimum number of items to show before stopping auto-pagination.
-     * DynamoDB returns unfiltered pages; the backend filters after query.
-     * A single DynamoDB page may yield very few matching results,
-     * so we auto-fetch additional pages until we have enough to display.
+     * Minimum number of items to auto-fill before stopping background fetch.
+     * Because DynamoDB pages are unfiltered and the backend filters after
+     * query, a single page may yield very few matching results. We keep
+     * fetching in the background until we have this many items to display.
      */
-    _defineProperty__default["default"](this, "MIN_PAGE_SIZE", 50);
+    _defineProperty__default["default"](this, "MIN_PAGE_SIZE", 20);
+    /**
+     * Monotonically increasing ID used to ignore stale fetch results.
+     * When a filter changes, fetchJobs() increments this counter. Any
+     * in-flight fetch or autoFillPages loop checks the counter before
+     * applying results — if it doesn't match, the results are discarded.
+     *
+     * Alternative: AbortController would actually cancel the HTTP request
+     * (axios supports it via the `signal` config option). That would save
+     * bandwidth and server load but requires threading `signal` through
+     * authedFunction → getJobs2 → fetchPage (3 layers). The fetchId
+     * approach is simpler and sufficient — stale requests still complete
+     * in the background but their results are ignored.
+     */
+    _defineProperty__default["default"](this, "_fetchId", 0);
     /**
      * Fetch a single page from the server using the given lastKey.
      */
@@ -829,39 +843,38 @@ class JobList extends React.Component {
       return maintenanceActions$1.getJobs2(auth.site, filters.status, filters.type, filters.priority, filters.assignee, filters.startTime, filters.endTime, filters.search, lastKey);
     });
     /**
-     * Fetch the first page of jobs with current filters.
-     * Auto-paginates if the server returns fewer items than MIN_PAGE_SIZE
-     * (because DynamoDB pages are unfiltered — a single page may yield
-     * very few results after server-side filtering).
+     * Fetch the first page and render immediately.
+     * If fewer than MIN_PAGE_SIZE items returned and there's more data,
+     * kicks off a background loop that keeps fetching and appending
+     * so results appear progressively.
      */
     _defineProperty__default["default"](this, "fetchJobs", async () => {
+      const fetchId = ++this._fetchId;
       this.setState({
-        loading: true
+        loading: true,
+        loadingMore: false
       }, async () => {
         try {
-          let allJobs = [];
-          let lastKey = null;
+          const res = await this.fetchPage(null);
+          if (this._fetchId !== fetchId) return; // stale fetch
 
-          // Keep fetching pages until we have enough items or run out of data
-          do {
-            const res = await this.fetchPage(lastKey);
-            const items = res.data.Items || [];
-            lastKey = res.data.LastKey || null;
-            allJobs = [...allJobs, ...items];
-          } while (lastKey && allJobs.length < this.MIN_PAGE_SIZE);
+          const items = res.data.Items || [];
+          const lastKey = res.data.LastKey || null;
           this.setState({
-            jobs: allJobs,
+            jobs: items,
             lastKey,
             hasMore: !!lastKey,
             loading: false
           });
+          this.props.jobsLoaded(items);
+          this.setRequesters(items);
 
-          // Sync to Redux so other components (e.g. Job detail) can access
-          this.props.jobsLoaded(allJobs);
-
-          // Update requesters list for the requester filter
-          this.setRequesters(allJobs);
+          // Auto-fill in background if first page was sparse
+          if (lastKey && items.length < this.MIN_PAGE_SIZE) {
+            this.autoFillPages(items, lastKey, fetchId);
+          }
         } catch (error) {
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('fetchJobs', error);
           this.setState({
             loading: false
@@ -870,40 +883,87 @@ class JobList extends React.Component {
       });
     });
     /**
-     * Load the next page of jobs and append to the existing list.
-     * Also auto-paginates to fill up to MIN_PAGE_SIZE new items.
+     * Background loop: keep fetching pages and appending results
+     * until we have MIN_PAGE_SIZE items or run out of data.
+     * Each page is rendered as it arrives so the user sees
+     * results appearing progressively.
+     */
+    _defineProperty__default["default"](this, "autoFillPages", async (existingJobs, startKey, fetchId) => {
+      this.setState({
+        loadingMore: true
+      });
+      let currentJobs = existingJobs;
+      let currentLastKey = startKey;
+      try {
+        while (currentLastKey && currentJobs.length < this.MIN_PAGE_SIZE) {
+          const res = await this.fetchPage(currentLastKey);
+          if (this._fetchId !== fetchId) return; // stale fetch
+
+          const items = res.data.Items || [];
+          currentLastKey = res.data.LastKey || null;
+          currentJobs = [...currentJobs, ...items];
+
+          // Append to UI immediately after each page arrives
+          this.setState({
+            jobs: currentJobs,
+            lastKey: currentLastKey,
+            hasMore: !!currentLastKey
+          });
+          if (items.length > 0) {
+            this.props.jobsLoaded(items);
+            this.setRequesters(currentJobs);
+          }
+        }
+      } catch (error) {
+        if (this._fetchId !== fetchId) return; // stale fetch
+        console.error('autoFillPages', error);
+      } finally {
+        if (this._fetchId === fetchId) {
+          this.setState({
+            loadingMore: false
+          });
+        }
+      }
+    });
+    /**
+     * Load the next batch of jobs when the user clicks "Load More".
+     * Fetches one page and also auto-fills in background if sparse.
      */
     _defineProperty__default["default"](this, "loadMore", async () => {
+      const fetchId = ++this._fetchId;
       const {
-        lastKey
+        lastKey,
+        jobs
       } = this.state;
       this.setState({
         loadingMore: true
       }, async () => {
         try {
-          let newJobs = [];
-          let currentLastKey = lastKey;
-          const existingCount = this.state.jobs.length;
+          const res = await this.fetchPage(lastKey);
+          if (this._fetchId !== fetchId) return; // stale fetch
 
-          // Keep fetching pages until we have enough new items or run out of data
-          do {
-            const res = await this.fetchPage(currentLastKey);
-            const items = res.data.Items || [];
-            currentLastKey = res.data.LastKey || null;
-            newJobs = [...newJobs, ...items];
-          } while (currentLastKey && existingCount + newJobs.length < existingCount + this.MIN_PAGE_SIZE);
-          this.setState(prevState => ({
-            jobs: [...prevState.jobs, ...newJobs],
-            lastKey: currentLastKey,
-            hasMore: !!currentLastKey,
-            loadingMore: false
-          }));
+          const items = res.data.Items || [];
+          const newLastKey = res.data.LastKey || null;
+          const updatedJobs = [...jobs, ...items];
+          this.setState({
+            jobs: updatedJobs,
+            lastKey: newLastKey,
+            hasMore: !!newLastKey
+          });
+          if (items.length > 0) {
+            this.props.jobsLoaded(items);
+          }
 
-          // Sync newly loaded jobs to Redux (append)
-          if (newJobs.length > 0) {
-            this.props.jobsLoaded(newJobs);
+          // Auto-fill in background if this page was sparse
+          if (newLastKey && items.length < this.MIN_PAGE_SIZE) {
+            this.autoFillPages(updatedJobs, newLastKey, fetchId);
+          } else {
+            this.setState({
+              loadingMore: false
+            });
           }
         } catch (error) {
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('loadMore', error);
           this.setState({
             loadingMore: false
@@ -1116,14 +1176,20 @@ class JobList extends React.Component {
           return r.userID === this.state.selectedRequesterFilter;
         });
       }
-      source = ___default["default"].sortBy(source, event => {
-        if (this.state.sortColumn === 'assigned') {
-          return event.Assignee ? event.Assignee.displayName : 'Unassigned';
-        }
-        if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
-        return event.createdUnix;
-      });
-      if (this.state.sortDesc) source.reverse();
+
+      // Skip sorting while auto-fill is appending results to avoid jumpiness.
+      // Sort is re-applied when the user clicks a column header or when
+      // auto-fill completes.
+      if (!this.state.loadingMore) {
+        source = ___default["default"].sortBy(source, event => {
+          if (this.state.sortColumn === 'assigned') {
+            return event.Assignee ? event.Assignee.displayName : 'Unassigned';
+          }
+          if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
+          return event.createdUnix;
+        });
+        if (this.state.sortDesc) source.reverse();
+      }
       return source;
     });
     _defineProperty__default["default"](this, "getCustomFieldValue", field => {
@@ -1705,7 +1771,29 @@ class JobList extends React.Component {
       hasMore,
       loadingMore
     } = this.state;
-    if (!hasMore) return null;
+    if (!hasMore && !loadingMore) return null;
+
+    // During background auto-fill, show a subtle spinner without a button
+    if (loadingMore) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex flex-center-row",
+        style: {
+          padding: '16px 0'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(FontAwesome__default["default"], {
+        name: "spinner fa-pulse fa-fw",
+        style: {
+          fontSize: 16,
+          color: PlussCore.Colours.TEXT_MID,
+          marginRight: 8
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "fontRegular fontSize-13",
+        style: {
+          color: PlussCore.Colours.TEXT_MID
+        }
+      }, "Loading more results\u2026"));
+    }
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex flex-center-row",
       style: {
@@ -1715,21 +1803,18 @@ class JobList extends React.Component {
       inline: true,
       buttonType: "tertiary",
       onClick: this.loadMore,
-      isActive: !loadingMore
-    }, loadingMore ? /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(FontAwesome__default["default"], {
-      name: "spinner fa-pulse fa-fw",
-      style: {
-        marginRight: 8
-      }
-    }), "Loading more\u2026") : 'Load More'));
+      isActive: true
+    }, "Load More"));
   }
   renderContent() {
     const {
       loading,
+      loadingMore,
       jobs
     } = this.state;
     if (loading) return this.renderLoading();
-    if (___default["default"].isEmpty(jobs)) return this.renderEmpty();
+    if (___default["default"].isEmpty(jobs) && !loadingMore) return this.renderEmpty();
+    if (___default["default"].isEmpty(jobs)) return this.renderLoading();
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Table, {
       className: "plussTable",
       striped: true,

package/dist/index.esm.js

@@ -780,12 +780,26 @@ class JobList extends Component {
       return params;
     });
     /**
-     * Minimum number of items to show before stopping auto-pagination.
-     * DynamoDB returns unfiltered pages; the backend filters after query.
-     * A single DynamoDB page may yield very few matching results,
-     * so we auto-fetch additional pages until we have enough to display.
+     * Minimum number of items to auto-fill before stopping background fetch.
+     * Because DynamoDB pages are unfiltered and the backend filters after
+     * query, a single page may yield very few matching results. We keep
+     * fetching in the background until we have this many items to display.
      */
-    _defineProperty(this, "MIN_PAGE_SIZE", 50);
+    _defineProperty(this, "MIN_PAGE_SIZE", 20);
+    /**
+     * Monotonically increasing ID used to ignore stale fetch results.
+     * When a filter changes, fetchJobs() increments this counter. Any
+     * in-flight fetch or autoFillPages loop checks the counter before
+     * applying results — if it doesn't match, the results are discarded.
+     *
+     * Alternative: AbortController would actually cancel the HTTP request
+     * (axios supports it via the `signal` config option). That would save
+     * bandwidth and server load but requires threading `signal` through
+     * authedFunction → getJobs2 → fetchPage (3 layers). The fetchId
+     * approach is simpler and sufficient — stale requests still complete
+     * in the background but their results are ignored.
+     */
+    _defineProperty(this, "_fetchId", 0);
     /**
      * Fetch a single page from the server using the given lastKey.
      */
@@ -798,39 +812,38 @@ class JobList extends Component {
       return maintenanceActions$1.getJobs2(auth.site, filters.status, filters.type, filters.priority, filters.assignee, filters.startTime, filters.endTime, filters.search, lastKey);
     });
     /**
-     * Fetch the first page of jobs with current filters.
-     * Auto-paginates if the server returns fewer items than MIN_PAGE_SIZE
-     * (because DynamoDB pages are unfiltered — a single page may yield
-     * very few results after server-side filtering).
+     * Fetch the first page and render immediately.
+     * If fewer than MIN_PAGE_SIZE items returned and there's more data,
+     * kicks off a background loop that keeps fetching and appending
+     * so results appear progressively.
      */
     _defineProperty(this, "fetchJobs", async () => {
+      const fetchId = ++this._fetchId;
       this.setState({
-        loading: true
+        loading: true,
+        loadingMore: false
       }, async () => {
         try {
-          let allJobs = [];
-          let lastKey = null;
+          const res = await this.fetchPage(null);
+          if (this._fetchId !== fetchId) return; // stale fetch
 
-          // Keep fetching pages until we have enough items or run out of data
-          do {
-            const res = await this.fetchPage(lastKey);
-            const items = res.data.Items || [];
-            lastKey = res.data.LastKey || null;
-            allJobs = [...allJobs, ...items];
-          } while (lastKey && allJobs.length < this.MIN_PAGE_SIZE);
+          const items = res.data.Items || [];
+          const lastKey = res.data.LastKey || null;
           this.setState({
-            jobs: allJobs,
+            jobs: items,
             lastKey,
             hasMore: !!lastKey,
             loading: false
           });
+          this.props.jobsLoaded(items);
+          this.setRequesters(items);
 
-          // Sync to Redux so other components (e.g. Job detail) can access
-          this.props.jobsLoaded(allJobs);
-
-          // Update requesters list for the requester filter
-          this.setRequesters(allJobs);
+          // Auto-fill in background if first page was sparse
+          if (lastKey && items.length < this.MIN_PAGE_SIZE) {
+            this.autoFillPages(items, lastKey, fetchId);
+          }
         } catch (error) {
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('fetchJobs', error);
           this.setState({
             loading: false
@@ -839,40 +852,87 @@ class JobList extends Component {
       });
     });
     /**
-     * Load the next page of jobs and append to the existing list.
-     * Also auto-paginates to fill up to MIN_PAGE_SIZE new items.
+     * Background loop: keep fetching pages and appending results
+     * until we have MIN_PAGE_SIZE items or run out of data.
+     * Each page is rendered as it arrives so the user sees
+     * results appearing progressively.
+     */
+    _defineProperty(this, "autoFillPages", async (existingJobs, startKey, fetchId) => {
+      this.setState({
+        loadingMore: true
+      });
+      let currentJobs = existingJobs;
+      let currentLastKey = startKey;
+      try {
+        while (currentLastKey && currentJobs.length < this.MIN_PAGE_SIZE) {
+          const res = await this.fetchPage(currentLastKey);
+          if (this._fetchId !== fetchId) return; // stale fetch
+
+          const items = res.data.Items || [];
+          currentLastKey = res.data.LastKey || null;
+          currentJobs = [...currentJobs, ...items];
+
+          // Append to UI immediately after each page arrives
+          this.setState({
+            jobs: currentJobs,
+            lastKey: currentLastKey,
+            hasMore: !!currentLastKey
+          });
+          if (items.length > 0) {
+            this.props.jobsLoaded(items);
+            this.setRequesters(currentJobs);
+          }
+        }
+      } catch (error) {
+        if (this._fetchId !== fetchId) return; // stale fetch
+        console.error('autoFillPages', error);
+      } finally {
+        if (this._fetchId === fetchId) {
+          this.setState({
+            loadingMore: false
+          });
+        }
+      }
+    });
+    /**
+     * Load the next batch of jobs when the user clicks "Load More".
+     * Fetches one page and also auto-fills in background if sparse.
      */
     _defineProperty(this, "loadMore", async () => {
+      const fetchId = ++this._fetchId;
       const {
-        lastKey
+        lastKey,
+        jobs
       } = this.state;
       this.setState({
         loadingMore: true
       }, async () => {
         try {
-          let newJobs = [];
-          let currentLastKey = lastKey;
-          const existingCount = this.state.jobs.length;
+          const res = await this.fetchPage(lastKey);
+          if (this._fetchId !== fetchId) return; // stale fetch
 
-          // Keep fetching pages until we have enough new items or run out of data
-          do {
-            const res = await this.fetchPage(currentLastKey);
-            const items = res.data.Items || [];
-            currentLastKey = res.data.LastKey || null;
-            newJobs = [...newJobs, ...items];
-          } while (currentLastKey && existingCount + newJobs.length < existingCount + this.MIN_PAGE_SIZE);
-          this.setState(prevState => ({
-            jobs: [...prevState.jobs, ...newJobs],
-            lastKey: currentLastKey,
-            hasMore: !!currentLastKey,
-            loadingMore: false
-          }));
+          const items = res.data.Items || [];
+          const newLastKey = res.data.LastKey || null;
+          const updatedJobs = [...jobs, ...items];
+          this.setState({
+            jobs: updatedJobs,
+            lastKey: newLastKey,
+            hasMore: !!newLastKey
+          });
+          if (items.length > 0) {
+            this.props.jobsLoaded(items);
+          }
 
-          // Sync newly loaded jobs to Redux (append)
-          if (newJobs.length > 0) {
-            this.props.jobsLoaded(newJobs);
+          // Auto-fill in background if this page was sparse
+          if (newLastKey && items.length < this.MIN_PAGE_SIZE) {
+            this.autoFillPages(updatedJobs, newLastKey, fetchId);
+          } else {
+            this.setState({
+              loadingMore: false
+            });
           }
         } catch (error) {
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('loadMore', error);
           this.setState({
             loadingMore: false
@@ -1085,14 +1145,20 @@ class JobList extends Component {
           return r.userID === this.state.selectedRequesterFilter;
         });
       }
-      source = _.sortBy(source, event => {
-        if (this.state.sortColumn === 'assigned') {
-          return event.Assignee ? event.Assignee.displayName : 'Unassigned';
-        }
-        if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
-        return event.createdUnix;
-      });
-      if (this.state.sortDesc) source.reverse();
+
+      // Skip sorting while auto-fill is appending results to avoid jumpiness.
+      // Sort is re-applied when the user clicks a column header or when
+      // auto-fill completes.
+      if (!this.state.loadingMore) {
+        source = _.sortBy(source, event => {
+          if (this.state.sortColumn === 'assigned') {
+            return event.Assignee ? event.Assignee.displayName : 'Unassigned';
+          }
+          if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
+          return event.createdUnix;
+        });
+        if (this.state.sortDesc) source.reverse();
+      }
       return source;
     });
     _defineProperty(this, "getCustomFieldValue", field => {
@@ -1674,7 +1740,29 @@ class JobList extends Component {
       hasMore,
       loadingMore
     } = this.state;
-    if (!hasMore) return null;
+    if (!hasMore && !loadingMore) return null;
+
+    // During background auto-fill, show a subtle spinner without a button
+    if (loadingMore) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-center-row",
+        style: {
+          padding: '16px 0'
+        }
+      }, /*#__PURE__*/React.createElement(FontAwesome, {
+        name: "spinner fa-pulse fa-fw",
+        style: {
+          fontSize: 16,
+          color: Colours$3.TEXT_MID,
+          marginRight: 8
+        }
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "fontRegular fontSize-13",
+        style: {
+          color: Colours$3.TEXT_MID
+        }
+      }, "Loading more results\u2026"));
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: "flex flex-center-row",
       style: {
@@ -1684,21 +1772,18 @@ class JobList extends Component {
       inline: true,
       buttonType: "tertiary",
       onClick: this.loadMore,
-      isActive: !loadingMore
-    }, loadingMore ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FontAwesome, {
-      name: "spinner fa-pulse fa-fw",
-      style: {
-        marginRight: 8
-      }
-    }), "Loading more\u2026") : 'Load More'));
+      isActive: true
+    }, "Load More"));
   }
   renderContent() {
     const {
       loading,
+      loadingMore,
       jobs
     } = this.state;
     if (loading) return this.renderLoading();
-    if (_.isEmpty(jobs)) return this.renderEmpty();
+    if (_.isEmpty(jobs) && !loadingMore) return this.renderEmpty();
+    if (_.isEmpty(jobs)) return this.renderLoading();
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, {
       className: "plussTable",
       striped: true,

package/dist/index.umd.js

@@ -800,12 +800,26 @@
         return params;
       });
       /**
-       * Minimum number of items to show before stopping auto-pagination.
-       * DynamoDB returns unfiltered pages; the backend filters after query.
-       * A single DynamoDB page may yield very few matching results,
-       * so we auto-fetch additional pages until we have enough to display.
+       * Minimum number of items to auto-fill before stopping background fetch.
+       * Because DynamoDB pages are unfiltered and the backend filters after
+       * query, a single page may yield very few matching results. We keep
+       * fetching in the background until we have this many items to display.
        */
-      _defineProperty__default["default"](this, "MIN_PAGE_SIZE", 50);
+      _defineProperty__default["default"](this, "MIN_PAGE_SIZE", 20);
+      /**
+       * Monotonically increasing ID used to ignore stale fetch results.
+       * When a filter changes, fetchJobs() increments this counter. Any
+       * in-flight fetch or autoFillPages loop checks the counter before
+       * applying results — if it doesn't match, the results are discarded.
+       *
+       * Alternative: AbortController would actually cancel the HTTP request
+       * (axios supports it via the `signal` config option). That would save
+       * bandwidth and server load but requires threading `signal` through
+       * authedFunction → getJobs2 → fetchPage (3 layers). The fetchId
+       * approach is simpler and sufficient — stale requests still complete
+       * in the background but their results are ignored.
+       */
+      _defineProperty__default["default"](this, "_fetchId", 0);
       /**
        * Fetch a single page from the server using the given lastKey.
        */
@@ -818,39 +832,38 @@
         return maintenanceActions$1.getJobs2(auth.site, filters.status, filters.type, filters.priority, filters.assignee, filters.startTime, filters.endTime, filters.search, lastKey);
       });
       /**
-       * Fetch the first page of jobs with current filters.
-       * Auto-paginates if the server returns fewer items than MIN_PAGE_SIZE
-       * (because DynamoDB pages are unfiltered — a single page may yield
-       * very few results after server-side filtering).
+       * Fetch the first page and render immediately.
+       * If fewer than MIN_PAGE_SIZE items returned and there's more data,
+       * kicks off a background loop that keeps fetching and appending
+       * so results appear progressively.
        */
       _defineProperty__default["default"](this, "fetchJobs", async () => {
+        const fetchId = ++this._fetchId;
         this.setState({
-          loading: true
+          loading: true,
+          loadingMore: false
         }, async () => {
           try {
-            let allJobs = [];
-            let lastKey = null;
+            const res = await this.fetchPage(null);
+            if (this._fetchId !== fetchId) return; // stale fetch
 
-            // Keep fetching pages until we have enough items or run out of data
-            do {
-              const res = await this.fetchPage(lastKey);
-              const items = res.data.Items || [];
-              lastKey = res.data.LastKey || null;
-              allJobs = [...allJobs, ...items];
-            } while (lastKey && allJobs.length < this.MIN_PAGE_SIZE);
+            const items = res.data.Items || [];
+            const lastKey = res.data.LastKey || null;
             this.setState({
-              jobs: allJobs,
+              jobs: items,
               lastKey,
               hasMore: !!lastKey,
               loading: false
             });
+            this.props.jobsLoaded(items);
+            this.setRequesters(items);
 
-            // Sync to Redux so other components (e.g. Job detail) can access
-            this.props.jobsLoaded(allJobs);
-
-            // Update requesters list for the requester filter
-            this.setRequesters(allJobs);
+            // Auto-fill in background if first page was sparse
+            if (lastKey && items.length < this.MIN_PAGE_SIZE) {
+              this.autoFillPages(items, lastKey, fetchId);
+            }
           } catch (error) {
+            if (this._fetchId !== fetchId) return; // stale fetch
             console.error('fetchJobs', error);
             this.setState({
               loading: false
@@ -859,40 +872,87 @@
         });
       });
       /**
-       * Load the next page of jobs and append to the existing list.
-       * Also auto-paginates to fill up to MIN_PAGE_SIZE new items.
+       * Background loop: keep fetching pages and appending results
+       * until we have MIN_PAGE_SIZE items or run out of data.
+       * Each page is rendered as it arrives so the user sees
+       * results appearing progressively.
+       */
+      _defineProperty__default["default"](this, "autoFillPages", async (existingJobs, startKey, fetchId) => {
+        this.setState({
+          loadingMore: true
+        });
+        let currentJobs = existingJobs;
+        let currentLastKey = startKey;
+        try {
+          while (currentLastKey && currentJobs.length < this.MIN_PAGE_SIZE) {
+            const res = await this.fetchPage(currentLastKey);
+            if (this._fetchId !== fetchId) return; // stale fetch
+
+            const items = res.data.Items || [];
+            currentLastKey = res.data.LastKey || null;
+            currentJobs = [...currentJobs, ...items];
+
+            // Append to UI immediately after each page arrives
+            this.setState({
+              jobs: currentJobs,
+              lastKey: currentLastKey,
+              hasMore: !!currentLastKey
+            });
+            if (items.length > 0) {
+              this.props.jobsLoaded(items);
+              this.setRequesters(currentJobs);
+            }
+          }
+        } catch (error) {
+          if (this._fetchId !== fetchId) return; // stale fetch
+          console.error('autoFillPages', error);
+        } finally {
+          if (this._fetchId === fetchId) {
+            this.setState({
+              loadingMore: false
+            });
+          }
+        }
+      });
+      /**
+       * Load the next batch of jobs when the user clicks "Load More".
+       * Fetches one page and also auto-fills in background if sparse.
        */
       _defineProperty__default["default"](this, "loadMore", async () => {
+        const fetchId = ++this._fetchId;
         const {
-          lastKey
+          lastKey,
+          jobs
         } = this.state;
         this.setState({
           loadingMore: true
         }, async () => {
           try {
-            let newJobs = [];
-            let currentLastKey = lastKey;
-            const existingCount = this.state.jobs.length;
+            const res = await this.fetchPage(lastKey);
+            if (this._fetchId !== fetchId) return; // stale fetch
 
-            // Keep fetching pages until we have enough new items or run out of data
-            do {
-              const res = await this.fetchPage(currentLastKey);
-              const items = res.data.Items || [];
-              currentLastKey = res.data.LastKey || null;
-              newJobs = [...newJobs, ...items];
-            } while (currentLastKey && existingCount + newJobs.length < existingCount + this.MIN_PAGE_SIZE);
-            this.setState(prevState => ({
-              jobs: [...prevState.jobs, ...newJobs],
-              lastKey: currentLastKey,
-              hasMore: !!currentLastKey,
-              loadingMore: false
-            }));
+            const items = res.data.Items || [];
+            const newLastKey = res.data.LastKey || null;
+            const updatedJobs = [...jobs, ...items];
+            this.setState({
+              jobs: updatedJobs,
+              lastKey: newLastKey,
+              hasMore: !!newLastKey
+            });
+            if (items.length > 0) {
+              this.props.jobsLoaded(items);
+            }
 
-            // Sync newly loaded jobs to Redux (append)
-            if (newJobs.length > 0) {
-              this.props.jobsLoaded(newJobs);
+            // Auto-fill in background if this page was sparse
+            if (newLastKey && items.length < this.MIN_PAGE_SIZE) {
+              this.autoFillPages(updatedJobs, newLastKey, fetchId);
+            } else {
+              this.setState({
+                loadingMore: false
+              });
             }
           } catch (error) {
+            if (this._fetchId !== fetchId) return; // stale fetch
             console.error('loadMore', error);
             this.setState({
               loadingMore: false
@@ -1105,14 +1165,20 @@
             return r.userID === this.state.selectedRequesterFilter;
           });
         }
-        source = ___default["default"].sortBy(source, event => {
-          if (this.state.sortColumn === 'assigned') {
-            return event.Assignee ? event.Assignee.displayName : 'Unassigned';
-          }
-          if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
-          return event.createdUnix;
-        });
-        if (this.state.sortDesc) source.reverse();
+
+        // Skip sorting while auto-fill is appending results to avoid jumpiness.
+        // Sort is re-applied when the user clicks a column header or when
+        // auto-fill completes.
+        if (!this.state.loadingMore) {
+          source = ___default["default"].sortBy(source, event => {
+            if (this.state.sortColumn === 'assigned') {
+              return event.Assignee ? event.Assignee.displayName : 'Unassigned';
+            }
+            if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
+            return event.createdUnix;
+          });
+          if (this.state.sortDesc) source.reverse();
+        }
         return source;
       });
       _defineProperty__default["default"](this, "getCustomFieldValue", field => {
@@ -1694,7 +1760,29 @@
         hasMore,
         loadingMore
       } = this.state;
-      if (!hasMore) return null;
+      if (!hasMore && !loadingMore) return null;
+
+      // During background auto-fill, show a subtle spinner without a button
+      if (loadingMore) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "flex flex-center-row",
+          style: {
+            padding: '16px 0'
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(FontAwesome__default["default"], {
+          name: "spinner fa-pulse fa-fw",
+          style: {
+            fontSize: 16,
+            color: PlussCore.Colours.TEXT_MID,
+            marginRight: 8
+          }
+        }), /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "fontRegular fontSize-13",
+          style: {
+            color: PlussCore.Colours.TEXT_MID
+          }
+        }, "Loading more results\u2026"));
+      }
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex flex-center-row",
         style: {
@@ -1704,21 +1792,18 @@
         inline: true,
         buttonType: "tertiary",
         onClick: this.loadMore,
-        isActive: !loadingMore
-      }, loadingMore ? /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(FontAwesome__default["default"], {
-        name: "spinner fa-pulse fa-fw",
-        style: {
-          marginRight: 8
-        }
-      }), "Loading more\u2026") : 'Load More'));
+        isActive: true
+      }, "Load More"));
     }
     renderContent() {
       const {
         loading,
+        loadingMore,
         jobs
       } = this.state;
       if (loading) return this.renderLoading();
-      if (___default["default"].isEmpty(jobs)) return this.renderEmpty();
+      if (___default["default"].isEmpty(jobs) && !loadingMore) return this.renderEmpty();
+      if (___default["default"].isEmpty(jobs)) return this.renderLoading();
       return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Table, {
         className: "plussTable",
         striped: true,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plusscommunities/pluss-maintenance-web-feedback",
-	"version": "1.1.37-beta.0",
+	"version": "1.1.37-beta.1",
 	"description": "Extension package to enable maintenance on Pluss Communities Platform",
 	"main": "dist/index.cjs.js",
 	"scripts": {

package/src/components/JobList.js

@@ -154,12 +154,27 @@ class JobList extends Component {
   };
 
   /**
-   * Minimum number of items to show before stopping auto-pagination.
-   * DynamoDB returns unfiltered pages; the backend filters after query.
-   * A single DynamoDB page may yield very few matching results,
-   * so we auto-fetch additional pages until we have enough to display.
+   * Minimum number of items to auto-fill before stopping background fetch.
+   * Because DynamoDB pages are unfiltered and the backend filters after
+   * query, a single page may yield very few matching results. We keep
+   * fetching in the background until we have this many items to display.
    */
-  MIN_PAGE_SIZE = 50;
+  MIN_PAGE_SIZE = 20;
+
+  /**
+   * Monotonically increasing ID used to ignore stale fetch results.
+   * When a filter changes, fetchJobs() increments this counter. Any
+   * in-flight fetch or autoFillPages loop checks the counter before
+   * applying results — if it doesn't match, the results are discarded.
+   *
+   * Alternative: AbortController would actually cancel the HTTP request
+   * (axios supports it via the `signal` config option). That would save
+   * bandwidth and server load but requires threading `signal` through
+   * authedFunction → getJobs2 → fetchPage (3 layers). The fetchId
+   * approach is simpler and sufficient — stale requests still complete
+   * in the background but their results are ignored.
+   */
+  _fetchId = 0;
 
   /**
    * Fetch a single page from the server using the given lastKey.
@@ -181,38 +196,37 @@ class JobList extends Component {
   };
 
   /**
-   * Fetch the first page of jobs with current filters.
-   * Auto-paginates if the server returns fewer items than MIN_PAGE_SIZE
-   * (because DynamoDB pages are unfiltered — a single page may yield
-   * very few results after server-side filtering).
+   * Fetch the first page and render immediately.
+   * If fewer than MIN_PAGE_SIZE items returned and there's more data,
+   * kicks off a background loop that keeps fetching and appending
+   * so results appear progressively.
    */
   fetchJobs = async () => {
-    this.setState({ loading: true }, async () => {
+    const fetchId = ++this._fetchId;
+    this.setState({ loading: true, loadingMore: false }, async () => {
       try {
-        let allJobs = [];
-        let lastKey = null;
+        const res = await this.fetchPage(null);
+        if (this._fetchId !== fetchId) return; // stale fetch
 
-        // Keep fetching pages until we have enough items or run out of data
-        do {
-          const res = await this.fetchPage(lastKey);
-          const items = res.data.Items || [];
-          lastKey = res.data.LastKey || null;
-          allJobs = [...allJobs, ...items];
-        } while (lastKey && allJobs.length < this.MIN_PAGE_SIZE);
+        const items = res.data.Items || [];
+        const lastKey = res.data.LastKey || null;
 
         this.setState({
-          jobs: allJobs,
+          jobs: items,
           lastKey,
           hasMore: !!lastKey,
           loading: false,
         });
 
-        // Sync to Redux so other components (e.g. Job detail) can access
-        this.props.jobsLoaded(allJobs);
+        this.props.jobsLoaded(items);
+        this.setRequesters(items);
 
-        // Update requesters list for the requester filter
-        this.setRequesters(allJobs);
+        // Auto-fill in background if first page was sparse
+        if (lastKey && items.length < this.MIN_PAGE_SIZE) {
+          this.autoFillPages(items, lastKey, fetchId);
+        }
       } catch (error) {
+        if (this._fetchId !== fetchId) return; // stale fetch
         console.error('fetchJobs', error);
         this.setState({ loading: false });
       }
@@ -220,38 +234,84 @@ class JobList extends Component {
   };
 
   /**
-   * Load the next page of jobs and append to the existing list.
-   * Also auto-paginates to fill up to MIN_PAGE_SIZE new items.
+   * Background loop: keep fetching pages and appending results
+   * until we have MIN_PAGE_SIZE items or run out of data.
+   * Each page is rendered as it arrives so the user sees
+   * results appearing progressively.
+   */
+  autoFillPages = async (existingJobs, startKey, fetchId) => {
+    this.setState({ loadingMore: true });
+
+    let currentJobs = existingJobs;
+    let currentLastKey = startKey;
+
+    try {
+      while (currentLastKey && currentJobs.length < this.MIN_PAGE_SIZE) {
+        const res = await this.fetchPage(currentLastKey);
+        if (this._fetchId !== fetchId) return; // stale fetch
+
+        const items = res.data.Items || [];
+        currentLastKey = res.data.LastKey || null;
+        currentJobs = [...currentJobs, ...items];
+
+        // Append to UI immediately after each page arrives
+        this.setState({
+          jobs: currentJobs,
+          lastKey: currentLastKey,
+          hasMore: !!currentLastKey,
+        });
+
+        if (items.length > 0) {
+          this.props.jobsLoaded(items);
+          this.setRequesters(currentJobs);
+        }
+      }
+    } catch (error) {
+      if (this._fetchId !== fetchId) return; // stale fetch
+      console.error('autoFillPages', error);
+    } finally {
+      if (this._fetchId === fetchId) {
+        this.setState({ loadingMore: false });
+      }
+    }
+  };
+
+  /**
+   * Load the next batch of jobs when the user clicks "Load More".
+   * Fetches one page and also auto-fills in background if sparse.
    */
   loadMore = async () => {
-    const { lastKey } = this.state;
+    const fetchId = ++this._fetchId;
+    const { lastKey, jobs } = this.state;
 
     this.setState({ loadingMore: true }, async () => {
       try {
-        let newJobs = [];
-        let currentLastKey = lastKey;
-        const existingCount = this.state.jobs.length;
-
-        // Keep fetching pages until we have enough new items or run out of data
-        do {
-          const res = await this.fetchPage(currentLastKey);
-          const items = res.data.Items || [];
-          currentLastKey = res.data.LastKey || null;
-          newJobs = [...newJobs, ...items];
-        } while (currentLastKey && (existingCount + newJobs.length) < existingCount + this.MIN_PAGE_SIZE);
-
-        this.setState((prevState) => ({
-          jobs: [...prevState.jobs, ...newJobs],
-          lastKey: currentLastKey,
-          hasMore: !!currentLastKey,
-          loadingMore: false,
-        }));
+        const res = await this.fetchPage(lastKey);
+        if (this._fetchId !== fetchId) return; // stale fetch
+
+        const items = res.data.Items || [];
+        const newLastKey = res.data.LastKey || null;
+
+        const updatedJobs = [...jobs, ...items];
+
+        this.setState({
+          jobs: updatedJobs,
+          lastKey: newLastKey,
+          hasMore: !!newLastKey,
+        });
+
+        if (items.length > 0) {
+          this.props.jobsLoaded(items);
+        }
 
-        // Sync newly loaded jobs to Redux (append)
-        if (newJobs.length > 0) {
-          this.props.jobsLoaded(newJobs);
+        // Auto-fill in background if this page was sparse
+        if (newLastKey && items.length < this.MIN_PAGE_SIZE) {
+          this.autoFillPages(updatedJobs, newLastKey, fetchId);
+        } else {
+          this.setState({ loadingMore: false });
         }
       } catch (error) {
+        if (this._fetchId !== fetchId) return; // stale fetch
         console.error('loadMore', error);
         this.setState({ loadingMore: false });
       }
@@ -485,14 +545,19 @@ class JobList extends Component {
       });
     }
 
-    source = _.sortBy(source, (event) => {
-      if (this.state.sortColumn === 'assigned') {
-        return event.Assignee ? event.Assignee.displayName : 'Unassigned';
-      }
-      if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
-      return event.createdUnix;
-    });
-    if (this.state.sortDesc) source.reverse();
+    // Skip sorting while auto-fill is appending results to avoid jumpiness.
+    // Sort is re-applied when the user clicks a column header or when
+    // auto-fill completes.
+    if (!this.state.loadingMore) {
+      source = _.sortBy(source, (event) => {
+        if (this.state.sortColumn === 'assigned') {
+          return event.Assignee ? event.Assignee.displayName : 'Unassigned';
+        }
+        if (this.state.sortColumn !== 'createdUnix') return event[this.state.sortColumn];
+        return event.createdUnix;
+      });
+      if (this.state.sortDesc) source.reverse();
+    }
     return source;
   };
 
@@ -1015,7 +1080,17 @@ class JobList extends Component {
 
   renderLoadMore() {
     const { hasMore, loadingMore } = this.state;
-    if (!hasMore) return null;
+    if (!hasMore && !loadingMore) return null;
+
+    // During background auto-fill, show a subtle spinner without a button
+    if (loadingMore) {
+      return (
+        <div className="flex flex-center-row" style={{ padding: '16px 0' }}>
+          <FontAwesome name="spinner fa-pulse fa-fw" style={{ fontSize: 16, color: Colours.TEXT_MID, marginRight: 8 }} />
+          <span className="fontRegular fontSize-13" style={{ color: Colours.TEXT_MID }}>Loading more results…</span>
+        </div>
+      );
+    }
 
     return (
       <div className="flex flex-center-row" style={{ padding: '16px 0' }}>
@@ -1023,26 +1098,20 @@ class JobList extends Component {
           inline
           buttonType="tertiary"
           onClick={this.loadMore}
-          isActive={!loadingMore}
+          isActive
         >
-          {loadingMore ? (
-            <span>
-              <FontAwesome name="spinner fa-pulse fa-fw" style={{ marginRight: 8 }} />
-              Loading more…
-            </span>
-          ) : (
-            'Load More'
-          )}
+          Load More
         </Components.Button>
       </div>
     );
   }
 
   renderContent() {
-    const { loading, jobs } = this.state;
+    const { loading, loadingMore, jobs } = this.state;
 
     if (loading) return this.renderLoading();
-    if (_.isEmpty(jobs)) return this.renderEmpty();
+    if (_.isEmpty(jobs) && !loadingMore) return this.renderEmpty();
+    if (_.isEmpty(jobs)) return this.renderLoading();
 
     return (
       <div>