@plusscommunities/pluss-maintenance-web-forms 1.1.37-beta.6 → 1.1.37-beta.7

package/dist/index.cjs.js

@@ -816,11 +816,25 @@ class JobList extends React.Component {
       }
       return params;
     });
+    /**
+     * 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", 20);
     /**
      * Monotonically increasing ID used to ignore stale fetch results.
      * When a filter changes, fetchJobs() increments this counter. Any
-     * in-flight fetch checks the counter before applying results —
-     * if it doesn't match, the results are discarded.
+     * 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);
     /**
@@ -836,6 +850,9 @@ class JobList extends React.Component {
     });
     /**
      * 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;
@@ -845,7 +862,8 @@ class JobList extends React.Component {
       }, async () => {
         try {
           const res = await this.fetchPage(null);
-          if (this._fetchId !== fetchId) return;
+          if (this._fetchId !== fetchId) return; // stale fetch
+
           const items = res.data.Items || [];
           const lastKey = res.data.LastKey || null;
           this.setState({
@@ -856,8 +874,13 @@ class JobList extends React.Component {
           });
           this.props.jobsLoaded(items);
           this.setRequesters(items);
+
+          // 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;
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('fetchJobs', error);
           this.setState({
             loading: false
@@ -865,8 +888,52 @@ class JobList extends React.Component {
         }
       });
     });
+    /**
+     * 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;
@@ -879,21 +946,30 @@ class JobList extends React.Component {
       }, async () => {
         try {
           const res = await this.fetchPage(lastKey);
-          if (this._fetchId !== fetchId) return;
+          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,
-            loadingMore: false
+            hasMore: !!newLastKey
           });
           if (items.length > 0) {
             this.props.jobsLoaded(items);
           }
+
+          // 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;
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('loadMore', error);
           this.setState({
             loadingMore: false
@@ -1274,7 +1350,7 @@ class JobList extends React.Component {
       // Filters (applied to server-side queries)
       selectedTypeFilter: null,
       selectedPriorityFilter: null,
-      selectedStatusFilter: null,
+      selectedStatusFilter: STATUS_IMCOMPLETE,
       selectedTimeFilterStart: null,
       selectedTimeFilterEnd: null,
       selectedTimeFilterText: null,
@@ -1725,24 +1801,16 @@ class JobList extends React.Component {
       }, "Loading more results\u2026"));
     }
     return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex flex-center-row",
       style: {
-        margin: '24px 0 40px 0',
-        position: 'relative',
-        top: -16
+        padding: '16px 0'
       }
     }, /*#__PURE__*/React__default["default"].createElement(Components$7.Button, {
-      buttonType: "primary",
+      inline: true,
+      buttonType: "tertiary",
       onClick: this.loadMore,
-      isActive: true,
-      style: {
-        width: '100%'
-      }
-    }, "Load More Results", /*#__PURE__*/React__default["default"].createElement(FontAwesome__default["default"], {
-      name: "plus",
-      style: {
-        marginLeft: 8
-      }
-    })));
+      isActive: true
+    }, "Load More"));
   }
   renderContent() {
     const {

package/dist/index.esm.js

@@ -785,11 +785,25 @@ class JobList extends Component {
       }
       return params;
     });
+    /**
+     * 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", 20);
     /**
      * Monotonically increasing ID used to ignore stale fetch results.
      * When a filter changes, fetchJobs() increments this counter. Any
-     * in-flight fetch checks the counter before applying results —
-     * if it doesn't match, the results are discarded.
+     * 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);
     /**
@@ -805,6 +819,9 @@ class JobList extends Component {
     });
     /**
      * 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;
@@ -814,7 +831,8 @@ class JobList extends Component {
       }, async () => {
         try {
           const res = await this.fetchPage(null);
-          if (this._fetchId !== fetchId) return;
+          if (this._fetchId !== fetchId) return; // stale fetch
+
           const items = res.data.Items || [];
           const lastKey = res.data.LastKey || null;
           this.setState({
@@ -825,8 +843,13 @@ class JobList extends Component {
           });
           this.props.jobsLoaded(items);
           this.setRequesters(items);
+
+          // 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;
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('fetchJobs', error);
           this.setState({
             loading: false
@@ -834,8 +857,52 @@ class JobList extends Component {
         }
       });
     });
+    /**
+     * 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;
@@ -848,21 +915,30 @@ class JobList extends Component {
       }, async () => {
         try {
           const res = await this.fetchPage(lastKey);
-          if (this._fetchId !== fetchId) return;
+          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,
-            loadingMore: false
+            hasMore: !!newLastKey
           });
           if (items.length > 0) {
             this.props.jobsLoaded(items);
           }
+
+          // 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;
+          if (this._fetchId !== fetchId) return; // stale fetch
           console.error('loadMore', error);
           this.setState({
             loadingMore: false
@@ -1243,7 +1319,7 @@ class JobList extends Component {
       // Filters (applied to server-side queries)
       selectedTypeFilter: null,
       selectedPriorityFilter: null,
-      selectedStatusFilter: null,
+      selectedStatusFilter: STATUS_IMCOMPLETE,
       selectedTimeFilterStart: null,
       selectedTimeFilterEnd: null,
       selectedTimeFilterText: null,
@@ -1694,24 +1770,16 @@ class JobList extends Component {
       }, "Loading more results\u2026"));
     }
     return /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-center-row",
       style: {
-        margin: '24px 0 40px 0',
-        position: 'relative',
-        top: -16
+        padding: '16px 0'
       }
     }, /*#__PURE__*/React.createElement(Components$7.Button, {
-      buttonType: "primary",
+      inline: true,
+      buttonType: "tertiary",
       onClick: this.loadMore,
-      isActive: true,
-      style: {
-        width: '100%'
-      }
-    }, "Load More Results", /*#__PURE__*/React.createElement(FontAwesome, {
-      name: "plus",
-      style: {
-        marginLeft: 8
-      }
-    })));
+      isActive: true
+    }, "Load More"));
   }
   renderContent() {
     const {

package/dist/index.umd.js

@@ -805,11 +805,25 @@
         }
         return params;
       });
+      /**
+       * 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", 20);
       /**
        * Monotonically increasing ID used to ignore stale fetch results.
        * When a filter changes, fetchJobs() increments this counter. Any
-       * in-flight fetch checks the counter before applying results —
-       * if it doesn't match, the results are discarded.
+       * 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);
       /**
@@ -825,6 +839,9 @@
       });
       /**
        * 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;
@@ -834,7 +851,8 @@
         }, async () => {
           try {
             const res = await this.fetchPage(null);
-            if (this._fetchId !== fetchId) return;
+            if (this._fetchId !== fetchId) return; // stale fetch
+
             const items = res.data.Items || [];
             const lastKey = res.data.LastKey || null;
             this.setState({
@@ -845,8 +863,13 @@
             });
             this.props.jobsLoaded(items);
             this.setRequesters(items);
+
+            // 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;
+            if (this._fetchId !== fetchId) return; // stale fetch
             console.error('fetchJobs', error);
             this.setState({
               loading: false
@@ -854,8 +877,52 @@
           }
         });
       });
+      /**
+       * 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;
@@ -868,21 +935,30 @@
         }, async () => {
           try {
             const res = await this.fetchPage(lastKey);
-            if (this._fetchId !== fetchId) return;
+            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,
-              loadingMore: false
+              hasMore: !!newLastKey
             });
             if (items.length > 0) {
               this.props.jobsLoaded(items);
             }
+
+            // 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;
+            if (this._fetchId !== fetchId) return; // stale fetch
             console.error('loadMore', error);
             this.setState({
               loadingMore: false
@@ -1263,7 +1339,7 @@
         // Filters (applied to server-side queries)
         selectedTypeFilter: null,
         selectedPriorityFilter: null,
-        selectedStatusFilter: null,
+        selectedStatusFilter: STATUS_IMCOMPLETE,
         selectedTimeFilterStart: null,
         selectedTimeFilterEnd: null,
         selectedTimeFilterText: null,
@@ -1714,24 +1790,16 @@
         }, "Loading more results\u2026"));
       }
       return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex flex-center-row",
         style: {
-          margin: '24px 0 40px 0',
-          position: 'relative',
-          top: -16
+          padding: '16px 0'
         }
       }, /*#__PURE__*/React__default["default"].createElement(Components$7.Button, {
-        buttonType: "primary",
+        inline: true,
+        buttonType: "tertiary",
         onClick: this.loadMore,
-        isActive: true,
-        style: {
-          width: '100%'
-        }
-      }, "Load More Results", /*#__PURE__*/React__default["default"].createElement(FontAwesome__default["default"], {
-        name: "plus",
-        style: {
-          marginLeft: 8
-        }
-      })));
+        isActive: true
+      }, "Load More"));
     }
     renderContent() {
       const {

package/package.json

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