admin.suherdy/pos_ui_optimization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: implement aggressive POS UI optimizations including product caching, lazy loading throttling, and hardware-accelerated rendering.

Browse Source
This commit is contained in:
Suherdy Yacob 2026-06-05 22:21:20 +07:00
parent af4e446a7e
commit a389ad963e
11 changed files with 139 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
__manifest__.py
View File

@ -48,6 +48,9 @@ Features
# ProductScreen portrait tab state + layout
'pos_ui_optimization/static/src/app/screens/product_screen/portrait_mode_patch.js',
'pos_ui_optimization/static/src/app/screens/product_screen/portrait_screen.xml',
# ProductCard and Orderline optimization patches
'pos_ui_optimization/static/src/app/components/product_card/product_card_patch.xml',
'pos_ui_optimization/static/src/app/components/orderline/orderline_patch.xml',
# Note splitting and defensive parsing patches
'pos_ui_optimization/static/src/app/screens/product_screen/notes_patch.js',
# Portrait CSS (must load after all XML patches)

8
models/pos_config.py
View File

@ -10,9 +10,15 @@ class PosConfig(models.Model):
help="Hide the Cash In/Out button in the POS Navbar menu"
)
hide_cart_images = fields.Boolean(
string="Hide Product Images in Cart",
default=False,
help="Hide product images in the order/cart lines inside POS"
)
@api.model
def _load_pos_data_fields(self, config):
fields_list = super()._load_pos_data_fields(config)
if fields_list:
fields_list.append('hide_cash_in_out_button')
fields_list.extend(['hide_cash_in_out_button', 'hide_cart_images'])
return fields_list

6
models/res_config_settings.py
View File

@ -9,3 +9,9 @@ class ResConfigSettings(models.TransientModel):
related='pos_config_id.hide_cash_in_out_button',
readonly=False
)
pos_hide_cart_images = fields.Boolean(
string="Hide Product Images in Cart",
related='pos_config_id.hide_cart_images',
readonly=False
)

7
static/src/app/components/order_display/order_display_patch.js
View File

@ -37,7 +37,13 @@ patch(OrderDisplay.prototype, {
return;
}
let orderScrollTimeout = null;
const onScroll = () => {
if (orderScrollTimeout) {
return;
}
orderScrollTimeout = setTimeout(() => {
orderScrollTimeout = null;
if (
scrollable.scrollTop + scrollable.clientHeight >=
scrollable.scrollHeight - 100
@ -46,6 +52,7 @@ patch(OrderDisplay.prototype, {
this.state.displayedCount += 20;
}
}
}, 150);
};
scrollable.addEventListener("scroll", onScroll);

12
static/src/app/components/orderline/orderline_patch.xml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-inherit="point_of_sale.Orderline" t-inherit-mode="extension" owl="1">
<xpath expr="//div[hasclass('o_line_container')]" position="attributes">
<attribute name="t-if">vals.productImage and !pos.config.hide_cart_images</attribute>
</xpath>
<xpath expr="//div[hasclass('o_line_container')]/img" position="attributes">
<attribute name="loading">lazy</attribute>
<attribute name="decoding">async</attribute>
</xpath>
</t>
</templates>

9
static/src/app/components/product_card/product_card_patch.xml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-inherit="point_of_sale.ProductCard" t-inherit-mode="extension" owl="1">
<xpath expr="//img" position="attributes">
<attribute name="loading">lazy</attribute>
<attribute name="decoding">async</attribute>
</xpath>
</t>
</templates>

8
static/src/app/screens/product_screen/notes_patch.js
View File

@ -3,6 +3,7 @@
import { NoteButton, InternalNoteButton } from "@point_of_sale/app/screens/product_screen/control_buttons/orderline_note_button/orderline_note_button";
import { Orderline } from "@point_of_sale/app/components/orderline/orderline";
import { patch } from "@web/core/utils/patch";
import { usePos } from "@point_of_sale/app/hooks/pos_hook";
// 1. Patch NoteButton to fix line-splitting bug for customer notes in standard Odoo
patch(NoteButton.prototype, {
@ -64,8 +65,13 @@ patch(InternalNoteButton.prototype, {
}
});
// 3. Patch Orderline to prevent UI crashes if note contains invalid JSON
// 3. Patch Orderline to prevent UI crashes if note contains invalid JSON and inject pos service
patch(Orderline.prototype, {
setup() {
super.setup();
this.pos = usePos();
},
get lineScreenValues() {
const originalParse = JSON.parse;
JSON.parse = function (str) {

11
static/src/app/screens/product_screen/product_screen_patch.js
View File

@ -10,17 +10,24 @@ patch(ProductScreen.prototype, {
this.state.displayedProductsCount = 80;
const originalOnScroll = this.onScroll;
let scrollTimeout = null;
this.onScroll = (ev) => {
if (originalOnScroll) {
originalOnScroll(ev);
}
if (scrollTimeout) {
return;
}
scrollTimeout = setTimeout(() => {
scrollTimeout = null;
const el = ev.target;
if (el && el.scrollTop + el.clientHeight >= el.scrollHeight - 400) {
const totalCount = this.pos.productToDisplayByCateg.reduce((acc, cat) => acc + cat[1].length, 0);
if (el && el.scrollTop + el.clientHeight >= el.scrollHeight - 450) {
const totalCount = this.pos.productsToDisplay.length;
if (this.state.displayedProductsCount < totalCount) {
this.state.displayedProductsCount += 80;
}
}
}, 150);
};
useEffect(

49
static/src/app/services/pos_store_patch.js
View File

@ -4,11 +4,31 @@ import { PosStore } from "@point_of_sale/app/services/pos_store";
import { patch } from "@web/core/utils/patch";
patch(PosStore.prototype, {
clearProductsCache() {
this._productsToDisplayCacheKey = null;
this._productsToDisplayCache = null;
this._productToDisplayByCategCacheKey = null;
this._productToDisplayByCategCache = null;
},
async editProduct(product) {
this.clearProductsCache();
return await super.editProduct(...arguments);
},
get productsToDisplay() {
const searchWord = this.searchProductWord.trim();
const categoryId = this.selectedCategory?.id || 0;
const templatesLength = this.models["product.template"].length;
const cacheKey = `${searchWord}_${categoryId}_${templatesLength}`;
if (this._productsToDisplayCacheKey === cacheKey && this._productsToDisplayCache) {
return this._productsToDisplayCache;
}
// We override this getter to remove Odoo's hardcoded 100-product limit.
// Because our custom UI optimization module uses progressive rendering (lazy loading)
// on scroll, we can safely return the entire product list without risking browser freezing.
const searchWord = this.searchProductWord.trim();
let recordIterator;
const isSearchByWord = searchWord !== "";
@ -56,26 +76,43 @@ patch(PosStore.prototype, {
filteredList.push(p);
}
let result = [];
if (
!isSearchByWord &&
!this.selectedCategory?.id &&
this.areAllProductsSpecial(filteredList)
) {
return [];
result = [];
} else {
result = this.orderProductBySequenceAndFav(filteredList);
}
return this.orderProductBySequenceAndFav(filteredList);
this._productsToDisplayCacheKey = cacheKey;
this._productsToDisplayCache = result;
return result;
},
get productToDisplayByCateg() {
const searchWord = this.searchProductWord.trim();
const categoryId = this.selectedCategory?.id || 0;
const templatesLength = this.models["product.template"].length;
const categoriesLength = this.models["pos.category"].length;
const cacheKey = `${searchWord}_${categoryId}_${templatesLength}_${categoriesLength}`;
if (this._productToDisplayByCategCacheKey === cacheKey && this._productToDisplayByCategCache) {
return this._productToDisplayByCategCache;
}
// We override this getter to remove Odoo's hardcoded 100-product category limit.
const sortedProducts = this.productsToDisplay;
if (!this.config.iface_group_by_categ) {
return sortedProducts.length ? [["0", sortedProducts]] : [];
const result = sortedProducts.length ? [["0", sortedProducts]] : [];
this._productToDisplayByCategCacheKey = cacheKey;
this._productToDisplayByCategCache = result;
return result;
}
const results = [];
const searchWord = this.searchProductWord.trim();
const byCateg = this.models["product.template"].toRaw().getAllBy("pos_categ_ids");
const selectedCategoryIds = !this.selectedCategory
? this.models["pos.category"].map((c) => c.id)
@ -117,6 +154,8 @@ patch(PosStore.prototype, {
}
}
this._productToDisplayByCategCacheKey = cacheKey;
this._productToDisplayByCategCache = results;
return results;
}
});

21
static/src/scss/portrait.scss
View File

@ -415,3 +415,24 @@
}
}
}
/* ============================================================
GENERAL POS PERFORMANCE OPTIMIZATIONS (All Display Modes)
============================================================ */
.pos .overflow-y-auto {
will-change: scroll-position;
-webkit-overflow-scrolling: touch;
}
.pos .product {
/* Disable transitions/animations on low-end ARM devices to make UI snappier */
transition: none !important;
animation: none !important;
transform: translateZ(0); /* GPU acceleration */
backface-visibility: hidden;
}
.pos .product-img img {
image-rendering: -webkit-optimize-contrast;
will-change: transform;
}

3
views/res_config_settings_views.xml
View File

@ -9,6 +9,9 @@
<setting string="Hide Cash In/Out (Navbar)" help="Hide Cash In/Out button in POS Navbar">
<field name="pos_hide_cash_in_out_button"/>
</setting>
<setting string="Hide Product Images in Cart" help="Hide product images in the order/cart lines for faster rendering">
<field name="pos_hide_cart_images"/>
</setting>
</xpath>
</field>
</record>