@cloudflare/realtimekit-ui 1.1.0-staging.8 → 1.1.0-staging.9

package/dist/esm/rtk-avatar_24.entry.js

@@ -2135,10 +2135,15 @@ const RtkPaginatedList = class {
      * @param {DataNode} node - The data node to add to the beginning of the list
      */
     async onNewNode(node) {
-        // if there are no pages, load the first page
+        // if there are no pages, append to the first page
         if (this.pages.length < 1) {
-            this.oldTS = node.timeMs + 1;
-            this.loadPrevPage();
+            this.oldTS = node.timeMs;
+            this.pages.unshift([node]);
+            this.newTS = node.timeMs;
+            this.maxTS = node.timeMs;
+            this.rerender();
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
         }
         else if (this.maxTS === this.newTS) {
             this.maxTS = node.timeMs;
@@ -2150,14 +2155,25 @@ const RtkPaginatedList = class {
             }
             else {
                 // if page is at full capacity, load next page
-                this.loadNextPage();
+                this.pages.unshift([node]);
+                this.newTS = node.timeMs;
+                // remove pages if out of bounds
+                if (this.pages.length > this.pagesAllowed)
+                    this.pages.pop();
+                // update timestamps
+                const lastPage = this.pages[this.pages.length - 1];
+                this.oldTS = lastPage[lastPage.length - 1].timeMs;
+                this.newTS = this.pages[0][0].timeMs;
+                this.rerender();
             }
+            if (this.autoScroll)
+                this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
         }
-        // If autoscroll is enabled, scroll to the bottom
-        if (this.autoScroll) {
-            this.shouldScrollToBottom = true;
-            this.scrollToBottom();
+        else {
+            if (this.autoScroll)
+                this.scrollToBottom();
         }
+        this.pendingScrollAnchor = null;
     }
     /**
      * Deletes a node anywhere from the list
@@ -2165,7 +2181,6 @@ const RtkPaginatedList = class {
      * */
     async onNodeDelete(id) {
         var _a, _b;
-        let didDelete = false;
         for (let i = this.pages.length - 1; i >= 0; i--) {
             const index = this.pages[i].findIndex((node) => node.id === id);
             // if message not found, move on
@@ -2176,17 +2191,17 @@ const RtkPaginatedList = class {
             // if page is empty, delete it
             if (this.pages[i].length === 0)
                 this.pages.splice(i, 1);
-            didDelete = true;
+            // update timestamps
+            const firstPage = this.pages[0];
+            const lastPage = this.pages[this.pages.length - 1];
+            this.newTS = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage[0]) === null || _a === void 0 ? void 0 : _a.timeMs;
+            this.oldTS = (_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage[lastPage.length - 1]) === null || _b === void 0 ? void 0 : _b.timeMs;
+            // if I have deleted the latest message, update maxTS
+            if (index === 0 && i === 0)
+                this.maxTS = this.newTS;
+            this.rerender();
             break;
         }
-        if (!didDelete)
-            return;
-        // update timestamps
-        const firstPage = this.pages[0];
-        const lastPage = this.pages[this.pages.length - 1];
-        this.newTS = (_a = firstPage === null || firstPage === void 0 ? void 0 : firstPage[0]) === null || _a === void 0 ? void 0 : _a.timeMs;
-        this.oldTS = (_b = lastPage === null || lastPage === void 0 ? void 0 : lastPage[lastPage.length - 1]) === null || _b === void 0 ? void 0 : _b.timeMs;
-        this.rerender();
     }
     /**
      * Updates a new node anywhere in the list
@@ -2213,6 +2228,10 @@ const RtkPaginatedList = class {
         this.loadPrevPage();
         if (this.$containerRef) {
             this.$containerRef.onscrollend = async () => {
+                // do not do anything if we are scrolling to bottom
+                if (this.shouldScrollToBottom)
+                    return;
+                // handle top and bottom scroll
                 if (this.isInView(this.$bottomRef)) {
                     await this.loadNextPage();
                 }
@@ -2264,54 +2283,47 @@ const RtkPaginatedList = class {
     }
     async loadNextPage() {
         if (this.isLoading)
-            return;
+            return [];
         // Do nothing. New timestamp needs to be assigned by loadPrevPage method
         if (!this.newTS) {
             this.showNewMessagesCTR = false;
-            this.shouldScrollToBottom = false;
-            return;
+            return [];
         }
-        // for autoscroll or scroll to bottom button
-        const maxAutoLoads = 200;
-        let loads = 0;
-        let prevNewTS = this.newTS;
         this.isLoading = true;
         this.isLoadingBottom = true;
-        while (loads < maxAutoLoads) {
-            const scrollAnchor = this.getScrollAnchor('bottom');
-            const data = await this.fetchData(this.newTS + 1, this.pageSize, false);
-            this.isLoading = false;
-            this.isLoadingBottom = false;
-            // no more new messages to load
-            if (!data.length) {
-                this.maxTS = this.newTS;
-                this.showNewMessagesCTR = false;
-                this.shouldScrollToBottom = false;
-                break;
-            }
-            // load new messages and append to the start
-            this.pages.unshift(data.reverse());
-            // remove pages if out of bounds
-            if (this.pages.length > this.pagesAllowed)
-                this.pages.pop();
-            // update timestamps
-            const lastPage = this.pages[this.pages.length - 1];
-            this.oldTS = lastPage[lastPage.length - 1].timeMs;
-            this.newTS = this.pages[0][0].timeMs;
-            this.rerender();
-            this.pendingScrollAnchor = scrollAnchor;
-            if (!this.shouldScrollToBottom)
-                break;
-            // if should scroll to bottom then retrigger
-            await this.waitForNextFrame();
-            this.scrollToBottom();
-            await this.waitForNextFrame();
-            // if no new messages, break
-            if (this.newTS === prevNewTS)
-                break;
-            prevNewTS = this.newTS;
-            loads++;
+        const scrollAnchor = this.getScrollAnchor('bottom');
+        const data = await this.fetchData(this.newTS + 1, this.pageSize, false);
+        this.isLoading = false;
+        this.isLoadingBottom = false;
+        // no more new messages to load
+        if (!data.length) {
+            this.maxTS = this.newTS;
+            this.showNewMessagesCTR = false;
+            return [];
+        }
+        // load new messages and append to the start
+        const incoming = [...data].reverse();
+        if (this.pages.length === 0)
+            this.pages.unshift([]);
+        const firstPage = this.pages[0];
+        const spaceInFirstPage = this.pageSize - firstPage.length;
+        if (spaceInFirstPage > 0) {
+            const toFill = incoming.splice(0, spaceInFirstPage);
+            firstPage.unshift(...toFill);
         }
+        while (incoming.length > 0) {
+            this.pages.unshift(incoming.splice(0, this.pageSize));
+        }
+        // remove pages if out of bounds
+        if (this.pages.length > this.pagesAllowed)
+            this.pages.pop();
+        // update timestamps
+        const lastPage = this.pages[this.pages.length - 1];
+        this.oldTS = lastPage[lastPage.length - 1].timeMs;
+        this.newTS = this.pages[0][0].timeMs;
+        this.rerender();
+        this.pendingScrollAnchor = scrollAnchor;
+        return data;
     }
     // Find the element that is closest to the top/bottom of the container
     getScrollAnchor(edge = 'top') {
@@ -2367,11 +2379,14 @@ const RtkPaginatedList = class {
         }
     }
     // this method is called recursively based on shouldScrollToBottom (see loadNextPage)
-    scrollToBottom() {
-        this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
-    }
-    waitForNextFrame() {
-        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    async scrollToBottom() {
+        this.shouldScrollToBottom = true;
+        while (this.shouldScrollToBottom) {
+            const response = await this.loadNextPage();
+            this.$bottomRef.scrollIntoView({ behavior: 'smooth' });
+            if (response.length === 0)
+                this.shouldScrollToBottom = false;
+        }
     }
     rerender() {
         this.rerenderBoolean = !this.rerenderBoolean;
@@ -2380,10 +2395,9 @@ const RtkPaginatedList = class {
         /**
          * div.container is flex=column-reversewhich is why div#bottom-scroll comes before div#top-scroll
          */
-        return (h(Host, { key: '5f036ac16ace127734d5ee172d537c64baeab415' }, h("div", { key: 'b6d8cf3019a72350f7a3a5b4d020b6ab39793f53', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '5c63462ffd995a3e266652bba4e3377636c5f9ca', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: 'c1fc4f2759d5be662047245b0dae3eb6f65a9b50', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
-                this.shouldScrollToBottom = true;
+        return (h(Host, { key: '3e7a77a4254ea0c75513edeaf72a5a77cee0e913' }, h("div", { key: 'f61e72e7a447048fe17ed8321a077841f991bfc5', class: "scrollbar container", part: "container", ref: (el) => (this.$containerRef = el) }, h("div", { key: '9efd0543b48b5ad5e147a763d258f7ef1a5024c5', class: { 'show-new-messages-ctr': true, active: this.showNewMessagesCTR } }, h("rtk-button", { key: '4b9bfda38538ceb89f31f317ddcb15d24f75ae8e', class: "show-new-messages", kind: "icon", variant: "secondary", part: "show-new-messages", onClick: () => {
                 this.scrollToBottom();
-            } }, h("rtk-icon", { key: '96b19395a2ca8e87ca5004f675cf79f8d58f036c', icon: this.iconPack.chevron_down }))), h("div", { key: '84789a3d0fa4645be711a87cda1e109e4f7d0db2', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: 'd17f28cc01695220ed6e705d528e8f555b77e8ea', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '4ee308d335cdc1f86e2bfdcc20611f50a51ef816', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: 'c07c4dd4c4ed0adf01d2fc224b7196a0f86243fd', size: "sm" }), h("div", { key: '52161ac30062c2262f1cdbcded50f2716f6ed20e', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
+            } }, h("rtk-icon", { key: 'fbcbc895940c8046916a2382806fb403e83a0a53', icon: this.iconPack.chevron_down }))), h("div", { key: 'fe2e51385216cba1905c75db783f037953e4831e', class: "smallest-dom-element", id: "bottom-scroll", ref: (el) => (this.$bottomRef = el) }), this.isLoadingBottom && this.pages.length > 0 && h("rtk-spinner", { key: '548899e797bbf139526208df3c7696b5859cc884', size: "sm" }), this.isLoading && this.pages.length < 1 && h("rtk-spinner", { key: '6353d5970e284369c274c28fc3c774d03fd555cc', size: "lg" }), !this.isLoading && this.pages.flat().length === 0 ? (h("div", { class: "empty-list" }, this.t('list.empty'))) : (h("div", { class: "page-wrapper" }, this.pages.map((page, pageIndex) => (h("div", { class: "page", "data-page-index": pageIndex }, this.createNodes([...page].reverse())))))), this.isLoadingTop && this.pages.length > 0 && h("rtk-spinner", { key: 'ff7b4e80f27610c0b73b63ea32fa5331b0cf4630', size: "sm" }), h("div", { key: '8729bf082cde39f7b154fa5816a70b6fb2c7f7df', class: "smallest-dom-element", id: "top-scroll", ref: (el) => (this.$topRef = el) }))));
     }
 };
 __decorate$2([