nsinnovations/erpnext
2
0
Fork 0
mirror of https://github.com/frappe/erpnext.git synced 2026-05-16 11:39:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: animate on item load

Browse Source
This commit is contained in:
diptanilsaha
2026-01-08 21:35:55 +05:30
parent 02cefa8bdb
commit 4d8d29b0df
2 changed files with 65 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
erpnext/public/scss/point-of-sale.scss
View File

@@ -117,6 +117,35 @@
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
&.item-loading {
position: relative;
pointer-events: none;
}
&.item-loading::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
#f3f3f3 0px,
#f3f3f3 160px,
#e9ecef 160px,
#e9ecef 320px
);
animation: skeletonMove 1.1s linear infinite;
z-index: 1;
}
@keyframes skeletonMove {
from {
background-position: 0 0;
}
to {
background-position: 320px 0;
}
}
&.items-not-found { &.items-not-found {
display: flex; display: flex;
align-items: center; align-items: center;

52
erpnext/selling/page/point_of_sale/pos_item_selector.js
View File

@@ -53,14 +53,20 @@ erpnext.PointOfSale.ItemSelector = class {
async load_items_data() { async load_items_data() {
await this.item_ready_group; await this.item_ready_group;
this.start_item_loading_animation();
if (!this.price_list) { if (!this.price_list) {
const res = await frappe.db.get_value("POS Profile", this.pos_profile, "selling_price_list"); const res = await frappe.db.get_value("POS Profile", this.pos_profile, "selling_price_list");
this.price_list = res.message.selling_price_list; this.price_list = res.message.selling_price_list;
} }
this.get_items({}).then(({ message }) => { this.get_items({})
this.render_item_list(message.items); .then(({ message }) => {
}); this.render_item_list(message.items);
})
.always(() => {
this.stop_item_loading_animation();
});
} }
get_items({ start = 0, page_length = 40, search_term = "" }) { get_items({ start = 0, page_length = 40, search_term = "" }) {
@@ -403,6 +409,8 @@ erpnext.PointOfSale.ItemSelector = class {
} }
filter_items({ search_term = "" } = {}) { filter_items({ search_term = "" } = {}) {
this.start_item_loading_animation();
const selling_price_list = this.events.get_frm().doc.selling_price_list; const selling_price_list = this.events.get_frm().doc.selling_price_list;
if (search_term) { if (search_term) {
@@ -423,19 +431,31 @@ erpnext.PointOfSale.ItemSelector = class {
} }
} }
this.get_items({ search_term }).then(({ message }) => { this.get_items({ search_term })
// eslint-disable-next-line no-unused-vars .then(({ message }) => {
const { items, serial_no, batch_no, barcode } = message; // eslint-disable-next-line no-unused-vars
if (search_term && !barcode) { const { items, serial_no, batch_no, barcode } = message;
this.search_index[selling_price_list][search_term] = items; if (search_term && !barcode) {
} this.search_index[selling_price_list][search_term] = items;
this.items = items; }
this.render_item_list(items); this.items = items;
this.auto_add_item && this.render_item_list(items);
this.search_field.$input[0].value && this.auto_add_item &&
this.items.length == 1 && this.search_field.$input[0].value &&
this.add_filtered_item_to_cart(); this.items.length == 1 &&
}); this.add_filtered_item_to_cart();
})
.always(() => {
this.stop_item_loading_animation();
});
}
start_item_loading_animation() {
this.$items_container.addClass("is-loading");
}
stop_item_loading_animation() {
this.$items_container.removeClass("is-loading");
} }
add_filtered_item_to_cart() { add_filtered_item_to_cart() {