To add a visible indicator for ongoing processes in Odoo 17's OWL POS (Point of Sale), you can customize the POS module to show a loading spinner or message when a process is in progress. This will help prevent users from clicking multiple times. Here’s how you can implement this:

Step-by-Step Solution

1. Enable Developer Mode:
   • Go to Settings > Scroll to the bottom > Click on Activate the Developer Mode.
2. Access the POS Module Files:
   • As Odoo Community doesn't have the GUI customization tools for this, you'll need access to the Odoo server’s file system where the code for OWL POS resides.
3. Locate the OWL POS JS Files:
   • OWL POS logic is handled in JavaScript files, usually located in addons/point_of_sale/static/src/js. Look for the relevant JS files that control button clicks or operations such as ProductScreen.js or PaymentScreen.js.
4. Modify the Code to Add a Loading Indicator:
   • Open the relevant JavaScript file. Find the section of code where the operations start, such as the place where click events or data fetching operations are triggered.
   • Add a loading spinner or overlay logic to the start and end of these operations.

// Example code to show loading spinner

const startLoading = () => {

    const loadingDiv = document.createElement('div');

    loadingDiv.id = 'loading-indicator';

    loadingDiv.innerHTML = '

    document.body.appendChild(loadingDiv);

};

const stopLoading = () => {

    const loadingDiv = document.getElementById('loading-indicator');

    if (loadingDiv) {

        loadingDiv.remove();

    }

};

// Wrap the operation to show loading spinner

someButtonElement.addEventListener('click', async () => {

    try {

        startLoading();

        // Your long-running operation

        await someLongRunningOperation();

    } finally {

        stopLoading();

    }

});

This example adds a div with a spinner that appears when the operation starts and disappears when it completes.

CSS for the Spinner (Add to POS Assets):

• You’ll also need to add CSS to make the spinner look good. Modify the CSS files located in addons/point_of_sale/static/src/css/ or add your custom CSS.

#loading-indicator {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

}

.spinner {

    border: 4px solid rgba(255, 255, 255, 0.3);

    border-top: 4px solid #fff;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    animation: spin 0.8s linear infinite;

}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

6. Restart Odoo Service