fix: slow down when page is loaded

frontend/src/js/hide_amounts.js

@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', function () {
+    function updateAmountsVisibility() {
+        const amounts = document.querySelectorAll('.amount');
+        const shouldHideAmounts = document.querySelector('#settings-hide-amounts');
+
+        amounts.forEach(el => {
+            if (shouldHideAmounts) {
+                if (!el.classList.contains('revealed')) {
+                    el.textContent = '•••••••••••';
+                }
+            } else {
+                el.innerHTML = `<span>${el.dataset.originalSign}</span><span>${el.dataset.originalPrefix}</span><span>${el.dataset.originalAmount}</span><span>${el.dataset.originalSuffix}</span>`;
+                el.classList.remove('revealed');
+            }
+        });
+    }
+
+    updateAmountsVisibility();
+
+    document.body.addEventListener('htmx:afterSwap', updateAmountsVisibility);
+
+    document.body.addEventListener('click', function (event) {
+        const amountElement = event.target.closest('.amount');
+        const shouldHideAmounts = document.querySelector('#settings-hide-amounts');
+
+        if (amountElement && shouldHideAmounts) {
+            if (amountElement.classList.contains('revealed')) {
+                amountElement.textContent = '•••••••••••';
+            } else {
+                amountElement.innerHTML = `<span>${amountElement.dataset.originalSign}</span><span>${amountElement.dataset.originalPrefix}</span><span>${amountElement.dataset.originalAmount}</span><span>${amountElement.dataset.originalSuffix}</span>`;
+            }
+            amountElement.classList.toggle('revealed');
+        }
+    });
+});

frontend/src/js/htmx.js

@@ -3,7 +3,6 @@ import './_htmx.js';
 import Alpine from "alpinejs";
 import mask from '@alpinejs/mask';
 import collapse from '@alpinejs/collapse'
-import Autosize from '@marcreichel/alpine-autosize';
 import { create, all } from 'mathjs';
 
 window.Alpine = Alpine;
@@ -14,7 +13,6 @@ window.math = create(all, {
 
 Alpine.plugin(mask);
 Alpine.plugin(collapse);
-Alpine.plugin(Autosize);
 Alpine.start();
 
 _hyperscript.browserInit();

frontend/src/main.js

@@ -9,3 +9,4 @@ import './js/autosize.js';
 import './js/sweetalert2.js';
 import './js/style.js';
 import './js/_utils.js';
+import './js/hide_amounts.js';