first commit

.gitignore

@@ -0,0 +1,6 @@
+*.pyc
+*~
+__pycache__/
+.DS_Store
+.vscode/
+.idea/

README.md

@@ -0,0 +1,26 @@
+# POS UI Optimization
+
+This Odoo 17 module optimizes the Point of Sale (POS) user interface for low-RAM devices (e.g., Android tablets with 2GB RAM).
+
+## Features
+
+- **Product List Incremental Loading**: Renders products in batches of 40 as you scroll, significantly reducing memory usage in categories with many products.
+- **Order Cart Incremental Loading**: Efficiently handles large orders by rendering order lines incrementally as you scroll through the cart.
+- **Improved Responsiveness**: Keeps the browser DOM light and prevents "white blank" screens caused by memory exhaustion.
+
+## Installation
+
+1. Place the `pos_ui_optimization` folder in your Odoo custom addons directory.
+2. Restart your Odoo server.
+3. In Odoo, activate **Developer Mode**.
+4. Go to **Apps** -> **Update Apps List**.
+5. Search for `POS UI Optimization`.
+6. Click **Install**.
+
+## Technical Details
+
+This module uses Odoo's JavaScript patching mechanism (`patch` from `@web/core/utils/patch`) to extend the core POS components:
+- `ProductsWidget`: Adds `displayedCount` state and a scroll listener to the product container.
+- `OrderWidget`: Adds `displayedCount` state and a scroll listener to the order container.
+
+No core Odoo files are modified.

__manifest__.py

@@ -0,0 +1,16 @@
+{
+    'name': 'POS UI Optimization',
+    'version': '1.0',
+    'category': 'Sales/Point of Sale',
+    'summary': 'Optimize POS UI for low-RAM devices with incremental rendering.',
+    'depends': ['point_of_sale'],
+    'data': [],
+    'assets': {
+        'point_of_sale._assets_pos': [
+            'pos_ui_optimization/static/src/app/**/*',
+        ],
+    },
+    'installable': True,
+    'application': False,
+    'license': 'LGPL-3',
+}

static/src/app/generic_components/order_widget/order_widget_patch.js

@@ -0,0 +1,43 @@
+/** @odoo-module **/
+
+import { OrderWidget } from "@point_of_sale/app/generic_components/order_widget/order_widget";
+import { patch } from "@web/core/utils/patch";
+import { useState, onMounted, onWillUnmount } from "@odoo/owl";
+
+patch(OrderWidget.prototype, {
+    setup() {
+        super.setup();
+        this.state = useState({ displayedCount: 20 });
+        
+        onMounted(() => {
+            const scrollable = this.scrollableRef.el;
+            if (!scrollable) return;
+
+            this.onScroll = () => {
+                if (
+                    scrollable.scrollTop + scrollable.clientHeight >=
+                    scrollable.scrollHeight - 100
+                ) {
+                    if (this.state.displayedCount < this.props.lines.length) {
+                        this.state.displayedCount += 20;
+                    }
+                }
+            };
+            scrollable.addEventListener("scroll", this.onScroll);
+
+            // Ensure selected line is visible
+            const selectedIndex = this.props.lines.findIndex(l => l.selected);
+            if (selectedIndex >= this.state.displayedCount) {
+                this.state.displayedCount = selectedIndex + 1;
+            }
+        });
+
+        onWillUnmount(() => {
+            this.scrollableRef.el?.removeEventListener("scroll", this.onScroll);
+        });
+    },
+
+    get linesToDisplay() {
+        return this.props.lines.slice(0, this.state.displayedCount);
+    }
+});

static/src/app/generic_components/order_widget/order_widget_patch.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-inherit="point_of_sale.OrderWidget" t-inherit-mode="extension" owl="1">
+        <xpath expr="//t[@t-foreach='props.lines']" position="attributes">
+            <attribute name="t-foreach">linesToDisplay</attribute>
+        </xpath>
+    </t>
+</templates>

static/src/app/screens/product_screen/product_list/product_list_patch.js

@@ -0,0 +1,58 @@
+/** @odoo-module **/
+
+import { ProductsWidget } from "@point_of_sale/app/screens/product_screen/product_list/product_list";
+import { patch } from "@web/core/utils/patch";
+import { useState, onMounted, onWillUnmount } from "@odoo/owl";
+
+patch(ProductsWidget.prototype, {
+    setup() {
+        super.setup();
+        this.state.displayedCount = 40;
+        
+        onMounted(() => {
+            const productsWidget = this.productsWidgetRef.el;
+            if (!productsWidget) return;
+            
+            this.scrollContainer = productsWidget.querySelector(".product-list-container");
+            this.onScroll = () => {
+                if (
+                    this.scrollContainer.scrollTop + this.scrollContainer.clientHeight >=
+                    this.scrollContainer.scrollHeight - 200
+                ) {
+                    if (this.state.displayedCount < this.productsToDisplay.length) {
+                        this.state.displayedCount += 40;
+                    }
+                }
+            };
+            this.scrollContainer?.addEventListener("scroll", this.onScroll);
+        });
+
+        onWillUnmount(() => {
+            this.scrollContainer?.removeEventListener("scroll", this.onScroll);
+        });
+    },
+
+    get selectedCategoryId() {
+        if (this._lastCategoryId !== this.pos.selectedCategoryId) {
+            this._lastCategoryId = this.pos.selectedCategoryId;
+            this.state.displayedCount = 40;
+        }
+        return super.selectedCategoryId;
+    },
+
+    get searchWord() {
+        const word = this.pos.searchProductWord.trim();
+        if (this._lastSearchWord !== word) {
+            this._lastSearchWord = word;
+            this.state.displayedCount = 40;
+        }
+        return super.searchWord;
+    },
+
+    get productsToDisplay() {
+        const list = super.productsToDisplay;
+        // The core productsToDisplay returns the full list.
+        // We slice it here for rendering.
+        return list.slice(0, this.state.displayedCount);
+    }
+});