[18.0][IMP] web_refresher: add auto refresh on interval by O-Mutt · Pull Request #3256 · OCA/web

O-Mutt · 2025-08-21T18:45:17Z

This adds a new "auto" refresh option to the UI for allowing an interval refresh. I have also implemented a setting that is stored in localStorage for the auto refresh interval. When the auto refresh is set it puts the value into localStorage to be re-used on each screen by default.

Here is the auto refresh in action with network traffic included:

Screen.Recording.2025-08-21.at.1.36.27.PM.mov

UI of baseline

UI w/hover

UI Clicked dropdown

UI showing animation of manual refresh button to indicate ongoing action

O-Mutt · 2025-08-21T19:26:17Z

web_refresher/static/src/xml/refresher.xml

+                    title="Refresh"
+                    tabindex="-1"
+                >
+                    <i id="manual-refresh-icon" class="fa fa-refresh" />


Moved the icons to an <i> to allow the fa-spin to be added and removed without spinning the whole button 🤣

O-Mutt · 2025-08-21T19:26:46Z

web_refresher/static/src/xml/refresher.xml

+                    id="manual-refresh-btn"
+                    class="btn btn-secondary m-0"
+                    aria-label="Refresh"
+                    t-on-click="onClickRefresh"


Maintain existing flow with the a reset of the new timeout when manually clicked

O-Mutt · 2025-08-21T19:27:23Z

web_refresher/static/src/xml/refresher.xml

+                        <button
+                            class="dropdown-item"
+                            t-on-click="onChangeAutoRefreshInterval"
+                            value="1000"
+                        >1s</button>


I'm not sure 1s is really appropriate. I could easily be persuaded to remove 1s

O-Mutt · 2025-08-21T19:27:57Z

web_refresher/static/src/xml/refresher.xml

+                        <button
+                            class="dropdown-item"
+                            t-on-click="onChangeAutoRefreshInterval"
+                            value="-1"
+                        >Off</button>


Used -1 as the "off" value to avoid null/undefined confusions. #javascriptthings

O-Mutt · 2025-08-21T19:28:13Z

web_refresher/static/src/xml/refresher.xml

+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                    >
+                        Auto Refresh: Off


Default text could be moved out to allow easier i18n

O-Mutt · 2025-08-21T19:28:44Z

web_refresher/static/src/xml/refresher.xml

+                    title="Refresh"
+                    tabindex="-1"
+                >
+                    <i id="manual-refresh-icon" class="fa fa-refresh" />


added id for easy selections

O-Mutt · 2025-08-21T19:29:00Z

web_refresher/static/src/js/refresher.esm.js

+            } else {
+                intervalValue = `${intervalInSeconds}s`;
+            }
+            document.getElementById("manual-refresh-icon").classList.add("fa-spin");


add fa-spin to show active auto refresh

O-Mutt · 2025-08-21T19:29:18Z

web_refresher/static/src/js/refresher.esm.js

+        } else {
+            const intervalInSeconds = this.refreshInterval / 1000;
+            if (intervalInSeconds >= 60) {
+                intervalValue = `${Math.floor(intervalInSeconds / 60)}min`;


60s or more gets "min" added

O-Mutt · 2025-08-21T19:37:49Z

web_refresher/static/src/js/refresher.esm.js

+        let intervalValue = "Off";
+        if (!this.refreshInterval || this.refreshInterval <= 0) {
+            intervalValue = "Off";
+            document.getElementById("manual-refresh-icon").classList.remove("fa-spin");
+        } else {
+            const intervalInSeconds = this.refreshInterval / 1000;
+            if (intervalInSeconds >= 60) {
+                intervalValue = `${Math.floor(intervalInSeconds / 60)}min`;
+            } else {
+                intervalValue = `${intervalInSeconds}s`;
+            }
+            document.getElementById("manual-refresh-icon").classList.add("fa-spin");
+        }
+        document.getElementById("auto-refresh-dd").textContent =
+            `Auto Refresh: ${intervalValue}`;
+    }


Reviewing this logic i don't love how it played out. I'm going to refactor

O-Mutt · 2025-08-21T19:38:30Z

web_refresher/static/src/js/refresher.esm.js

+        // Check the refreshInterval is greater than 0 and start a timer for the next refresh
+        if (this.refreshInterval > 0) {
+            // Always attempt to clear a running timeout in case the refresh was done manually
+            if (typeof this.runningRefresherId === "number") {
+                clearTimeout(this.runningRefresherId);
+            }
+            this.runningRefresherId = setTimeout(() => {
+                this.refresh();
+            }, this.refreshInterval);
+        }


Consolidated logic for starting the refresh interval in the current refresh to allow recursive calls

O-Mutt · 2025-08-21T19:41:55Z

web_refresher/static/src/js/refresher.esm.js

+        const newIntervalText =
+            clickedOption.textContent ?? clickedOption.target.textContent;


Use the xml button text as the interval on the label

web_refresher/__manifest__.py

Copilot

Pull request overview

This PR adds an auto-refresh feature to the web_refresher module, allowing users to set automatic page refresh intervals. The implementation includes a new dropdown UI for selecting refresh intervals (1s, 5s, 10s, 30s, 1min, or Off), the ability to set a default refresh interval stored in localStorage, and visual indicators showing the refresh status.

Changes:

Added auto-refresh interval dropdown with preset options in the UI template
Implemented localStorage-based persistence for refresh settings per page and default settings
Added visual feedback with spinning refresh icon and star icon for default setting indication

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 10 comments.

File	Description
web_refresher/static/src/xml/refresher.xml	Replaced simple refresh button with button group containing auto-refresh dropdown, default setting button, and manual refresh button
web_refresher/static/src/js/refresher.esm.js	Added auto-refresh logic with localStorage persistence, timer management, and UI update methods
web_refresher/manifest.py	Updated version number from 18.0.1.0.0 to 18.0.2.0.0

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-16T18:32:07Z

web_refresher/static/src/js/refresher.esm.js

+            returnInterval = parseInt(refreshInterval ?? -1);
+            returnText = intervalText;
+        } else if (Object.hasOwn(refreshSettings, this.refreshDefaultSettingsKey)) {
+            const {refreshInterval = -1, intervalText = "Off"} =
+                refreshSettings[this.refreshDefaultSettingsKey];
+            returnInterval = parseInt(refreshInterval ?? -1);


The nullish coalescing operator is redundant here since refreshInterval already has a default value of -1 from destructuring on line 80. Additionally, parseInt on an already-numeric value is unnecessary if refreshInterval is stored as a number. If it's stored as a string in localStorage, ensure consistent parsing is applied.

Suggested change

returnInterval = parseInt(refreshInterval ?? -1);

returnText = intervalText;

} else if (Object.hasOwn(refreshSettings, this.refreshDefaultSettingsKey)) {

const {refreshInterval = -1, intervalText = "Off"} =

refreshSettings[this.refreshDefaultSettingsKey];

returnInterval = parseInt(refreshInterval ?? -1);

returnInterval =

typeof refreshInterval === "string"

? parseInt(refreshInterval, 10)

: refreshInterval;

returnText = intervalText;

} else if (Object.hasOwn(refreshSettings, this.refreshDefaultSettingsKey)) {

const {refreshInterval = -1, intervalText = "Off"} =

refreshSettings[this.refreshDefaultSettingsKey];

returnInterval =

typeof refreshInterval === "string"

? parseInt(refreshInterval, 10)

: refreshInterval;

Copilot · 2026-01-16T18:32:07Z

web_refresher/static/src/js/refresher.esm.js

+            returnInterval = parseInt(refreshInterval ?? -1);
+            returnText = intervalText;
+        } else if (Object.hasOwn(refreshSettings, this.refreshDefaultSettingsKey)) {
+            const {refreshInterval = -1, intervalText = "Off"} =
+                refreshSettings[this.refreshDefaultSettingsKey];
+            returnInterval = parseInt(refreshInterval ?? -1);


The nullish coalescing operator is redundant here since refreshInterval already has a default value of -1 from destructuring on line 85. Additionally, parseInt on an already-numeric value is unnecessary if refreshInterval is stored as a number. If it's stored as a string in localStorage, ensure consistent parsing is applied.

Suggested change

returnInterval = parseInt(refreshInterval ?? -1);

returnText = intervalText;

} else if (Object.hasOwn(refreshSettings, this.refreshDefaultSettingsKey)) {

const {refreshInterval = -1, intervalText = "Off"} =

refreshSettings[this.refreshDefaultSettingsKey];

returnInterval = parseInt(refreshInterval ?? -1);

returnInterval =

typeof refreshInterval === "string"

? parseInt(refreshInterval, 10)

: refreshInterval;

returnText = intervalText;

} else if (Object.hasOwn(refreshSettings, this.refreshDefaultSettingsKey)) {

const {refreshInterval = -1, intervalText = "Off"} =

refreshSettings[this.refreshDefaultSettingsKey];

returnInterval =

typeof refreshInterval === "string"

? parseInt(refreshInterval, 10)

: refreshInterval;

Copilot · 2026-01-16T18:32:07Z

web_refresher/static/src/js/refresher.esm.js

+                value: intervalValue.refreshInterval,
+                textContent: intervalValue.intervalText,


Calling onChangeAutoRefreshInterval in onMounted with an object that doesn't match the event structure could cause issues. The method expects either clickedOption.value/clickedOption.target.value and clickedOption.textContent/clickedOption.target.textContent. This works because of the nullish coalescing fallbacks, but creates inconsistent API usage. Consider creating a separate initialization method or documenting this dual usage pattern.

Suggested change

value: intervalValue.refreshInterval,

textContent: intervalValue.intervalText,

target: {

value: intervalValue.refreshInterval,

textContent: intervalValue.intervalText,

},

Copilot · 2026-01-16T18:32:08Z

web_refresher/static/src/js/refresher.esm.js

+
+    onChangeAutoRefreshInterval(clickedOption) {
+        const newInterval =
+            parseInt(clickedOption.value ?? clickedOption.target.value) ?? -1;


If both clickedOption.value and clickedOption.target.value are undefined, parseInt(undefined) returns NaN, and the second nullish coalescing won't trigger because NaN is not null/undefined. This should use logical OR (||) or check for NaN explicitly: parseInt(clickedOption.value ?? clickedOption.target.value, 10) || -1.

Suggested change

parseInt(clickedOption.value ?? clickedOption.target.value) ?? -1;

parseInt(clickedOption.value ?? clickedOption.target.value, 10) || -1;

Copilot · 2026-01-16T18:32:08Z

web_refresher/static/src/js/refresher.esm.js

+        this._setLocalStorageValue(this.refreshDefaultSettingsKey, {
+            refreshInterval: this.refreshInterval,
+            intervalText: document.getElementById("auto-refresh-interval-text")
+                .textContent,
+        });
+        this._setIntervalUi(
+            document.getElementById("auto-refresh-interval-text").textContent
+        );


This DOM query is performed twice in setRefreshAsDefault (lines 197-198 and 201). Consider storing the element or its textContent in a variable to avoid redundant DOM queries.

Suggested change

this._setLocalStorageValue(this.refreshDefaultSettingsKey, {

refreshInterval: this.refreshInterval,

intervalText: document.getElementById("auto-refresh-interval-text")

.textContent,

});

this._setIntervalUi(

document.getElementById("auto-refresh-interval-text").textContent

);

const intervalElement = document.getElementById("auto-refresh-interval-text");

const intervalText = intervalElement ? intervalElement.textContent : "";

this._setLocalStorageValue(this.refreshDefaultSettingsKey, {

refreshInterval: this.refreshInterval,

intervalText: intervalText,

});

this._setIntervalUi(intervalText);

Copilot · 2026-01-16T18:32:08Z

web_refresher/static/src/js/refresher.esm.js

+        const manualRefreshIcon = document.getElementById("manual-refresh-icon");
+        if (manualRefreshIcon) {
+            if (!this.refreshInterval || this.refreshInterval <= 0) {
+                manualRefreshIcon.classList.remove("fa-spin");
+            } else {
+                manualRefreshIcon.classList.add("fa-spin");
+            }
+        }


Direct DOM manipulation using getElementById is not idiomatic in OWL components. Consider using t-ref in the template and useRef hook to access DOM elements, or manage the spinning state through reactive state that updates the template.

Copilot · 2026-01-16T18:32:08Z

web_refresher/static/src/js/refresher.esm.js

+        // Check the refreshInterval is greater than 0 and start a timer for the next refresh
+        if (this.refreshInterval > 0) {
+            // Always attempt to clear a running timeout in case the refresh was done manually
+            if (typeof this.runningRefresherId === "number") {


The type check typeof this.runningRefresherId === 'number' is unnecessarily strict. Since clearTimeout safely handles null, undefined, and 0, a simple truthy check would suffice: if (this.runningRefresherId). This pattern is also used on line 212.

Suggested change

if (typeof this.runningRefresherId === "number") {

if (this.runningRefresherId) {

Copilot · 2026-01-16T18:32:09Z

web_refresher/static/src/js/refresher.esm.js

        this.refreshAnimation = useRefreshAnimation(1000);
        this.onClickRefresh = useDebounced(this.onClickRefresh, 200);
+        this.onChangeAutoRefreshInterval = this.onChangeAutoRefreshInterval.bind(this);
+        this.runningRefresherId = null;


The property runningRefresherId is initialized but not defined as a class field. Consider declaring it at the class level for clarity: runningRefresherId = null; before the setup() method, similar to autoRefreshIntervalKey and refreshDefaultSettingsKey.

Copilot · 2026-01-16T18:32:09Z

web_refresher/static/src/js/refresher.esm.js

+            parseInt(clickedOption.value ?? clickedOption.target.value) ?? -1;
+        const newIntervalText =
+            clickedOption.textContent ?? clickedOption.target.textContent ?? "Off";
+        this.refreshInterval = newInterval;


The property refreshInterval is assigned but never declared as a class field. Consider declaring it at the class level for clarity, similar to other class properties.

Copilot · 2026-01-16T18:32:09Z

web_refresher/static/src/js/refresher.esm.js

+        this.refreshInterval = newInterval;
+        this._setIntervalUi(newIntervalText);
+        if (this.runningRefresherId) {
+            clearTimeout(this.runningRefresherId);
+        }


Calling refresh() immediately when changing the auto-refresh interval triggers an immediate refresh, which is correct. However, if auto-refresh is turned off (value === -1), calling refresh() will not schedule another refresh (line 137 checks > 0), but the running timer isn't cleared until line 212-214, creating a potential race condition where the previous timer might still fire. The clearTimeout should happen before checking conditions in the refresh() method or the order should be reconsidered.

Suggested change

this.refreshInterval = newInterval;

this._setIntervalUi(newIntervalText);

if (this.runningRefresherId) {

clearTimeout(this.runningRefresherId);

}

if (this.runningRefresherId) {

clearTimeout(this.runningRefresherId);

this.runningRefresherId = null;

}

this.refreshInterval = newInterval;

this._setIntervalUi(newIntervalText);

zamberjo · 2026-01-16T19:44:21Z

Hi @O-Mutt , thank you for your work on this PR.

I wanted to suggest taking a look at this other PR #3396. Although it targets version 17.0, it proposes an interesting approach using the Odoo Bus to update the view reactively (listening to create/write events) instead of using an automatic refresh interval (polling).
You might find it interesting as an alternative, as this method can be more efficient by avoiding unnecessary page reloads when there are no data changes.

O-Mutt force-pushed the feat/autoRefresh branch 3 times, most recently from f179836 to 620e3d7 Compare August 21, 2025 18:54

O-Mutt changed the title ~~feat: adding an auto refresh dropdown/toggle~~ [IMP] web_refresher: adding an auto refresh dropdown/toggle Aug 21, 2025

O-Mutt changed the title ~~[IMP] web_refresher: adding an auto refresh dropdown/toggle~~ [IMP] web_refresher: add auto refresh on interval Aug 21, 2025

O-Mutt force-pushed the feat/autoRefresh branch 2 times, most recently from 1c710d5 to 9dde2b4 Compare August 21, 2025 19:11

O-Mutt commented Aug 21, 2025

View reviewed changes

O-Mutt commented Aug 22, 2025

View reviewed changes

web_refresher/__manifest__.py Show resolved Hide resolved

O-Mutt commented Aug 22, 2025

View reviewed changes

web_refresher/__manifest__.py Outdated Show resolved Hide resolved

O-Mutt force-pushed the feat/autoRefresh branch from 803e87d to e746c50 Compare September 1, 2025 12:24

StefanRijnhart changed the title ~~[IMP] web_refresher: add auto refresh on interval~~ [18.0][IMP] web_refresher: add auto refresh on interval Sep 3, 2025

StefanRijnhart added this to the 18.0 milestone Sep 3, 2025

O-Mutt force-pushed the feat/autoRefresh branch from f922248 to c1f6881 Compare September 4, 2025 16:25

O-Mutt force-pushed the feat/autoRefresh branch from c1f6881 to 935ca4d Compare September 17, 2025 19:18

O-Mutt added 14 commits January 16, 2026 12:28

[IMP] web_refresher: add auto refresh on interval

21659b9

[FIX] web_refresher: linting

e0da397

[CHORE] web_refresher: one more lint fix

db951f6

[CHORE] web_refresher: one more lint fix

888ab62

[IMP] web_refresher: make the interval text cleaner

7566222

[CHORE] lint

abdc1c2

[FIX] parse int from localstorage

7956c86

[FIX] Moving state to local storage and defaulting the value on load

f9ef3c7

[IMP] Slightly more elegent form of loading

2ad1ace

[LINT] fix lint errors

0290062

[LINT] Again

99b3316

[IMP] add per page settings and a default

2f71126

[FIX] Fixing up the "default" setting when not yet set

c4d694b

[LINT] Always with the lint failures

509f99a

O-Mutt added 2 commits January 16, 2026 12:28

fix: memory leak due to held refrence blocking GC

7cdfeaa

Hide on small view auto refresh

33face0

Copilot AI review requested due to automatic review settings January 16, 2026 18:28

O-Mutt force-pushed the feat/autoRefresh branch from 74e0f06 to 33face0 Compare January 16, 2026 18:28

Copilot started reviewing on behalf of O-Mutt January 16, 2026 18:29 View session

Copilot AI reviewed Jan 16, 2026

View reviewed changes

		const newIntervalText =
		clickedOption.textContent ?? clickedOption.target.textContent;

		value: intervalValue.refreshInterval,
		textContent: intervalValue.intervalText,

	parseInt(clickedOption.value ?? clickedOption.target.value) ?? -1;
	parseInt(clickedOption.value ?? clickedOption.target.value, 10) \|\| -1;

	if (typeof this.runningRefresherId === "number") {
	if (this.runningRefresherId) {

Uh oh!

Conversation

O-Mutt commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Here is the auto refresh in action with network traffic included:

UI of baseline

UI w/hover

UI Clicked dropdown

UI showing animation of manual refresh button to indicate ongoing action

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

zamberjo commented Jan 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

O-Mutt commented Aug 21, 2025 •

edited

Loading