2 files changed, 19 insertions, 0 deletions
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 0b00eb8e8e..e8b546970f 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -12,6 +12,7 @@ import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
 import {request, POST} from '../modules/fetch.js';
+import '../htmx.js';
 
 const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
 
diff --git a/web_src/js/htmx.js b/web_src/js/htmx.js
new file mode 100644
index 0000000000..92400d1cbe
--- /dev/null
+++ b/web_src/js/htmx.js
@@ -0,0 +1,18 @@
+import * as htmx from 'htmx.org';
+import {showErrorToast} from './modules/toast.js';
+
+// https://htmx.org/reference/#config
+htmx.config.requestClass = 'is-loading';
+htmx.config.scrollIntoViewOnBoost = false;
+
+// https://htmx.org/events/#htmx:sendError
+document.body.addEventListener('htmx:sendError', (event) => {
+  // TODO: add translations
+  showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`);
+});
+
+// https://htmx.org/events/#htmx:responseError
+document.body.addEventListener('htmx:responseError', (event) => {
+  // TODO: add translations
+  showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`);
+});