Cleanup charts

package-lock.json

@@ -10,8 +10,10 @@
                 "alpinejs": "^3.12.3",
                 "bootstrap": "^5.3.0",
                 "chart.js": "^4.3.3",
+                "chartjs-adapter-date-fns": "^3.0.0",
                 "chartjs-chart-sankey": "^0.12.0",
                 "date-fns": "^2.30.0",
+                "i18n-js": "^4.3.0",
                 "store": "^2.0.12"
             },
             "devDependencies": {
@@ -458,6 +460,14 @@
                 "proxy-from-env": "^1.1.0"
             }
         },
+        "node_modules/bignumber.js": {
+            "version": "9.1.1",
+            "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
+            "integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -508,6 +518,15 @@
                 "pnpm": ">=7"
             }
         },
+        "node_modules/chartjs-adapter-date-fns": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
+            "integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
+            "peerDependencies": {
+                "chart.js": ">=2.8.0",
+                "date-fns": ">=2.0.0"
+            }
+        },
         "node_modules/chartjs-chart-sankey": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/chartjs-chart-sankey/-/chartjs-chart-sankey-0.12.0.tgz",
@@ -688,6 +707,15 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/i18n-js": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.3.0.tgz",
+            "integrity": "sha512-PX93eT6WPV6Ym6mHtFKGDRZB0zwDX7HUPkgprjsZ28J6/Ohw1nvRYuM93or3pWv2VLxs6XfBf7X9Fc/YAZNEtQ==",
+            "dependencies": {
+                "bignumber.js": "*",
+                "make-plural": "*"
+            }
+        },
         "node_modules/immutable": {
             "version": "4.3.2",
             "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
@@ -752,6 +780,11 @@
                 "vite": "^3.0.0 || ^4.0.0"
             }
         },
+        "node_modules/make-plural": {
+            "version": "7.3.0",
+            "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.3.0.tgz",
+            "integrity": "sha512-/K3BC0KIsO+WK2i94LkMPv3wslMrazrQhfi5We9fMbLlLjzoOSJWr7TAdupLlDWaJcWxwoNosBkhFDejiu5VDw=="
+        },
         "node_modules/mime-db": {
             "version": "1.52.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",

package.json

@@ -17,8 +17,10 @@
         "alpinejs": "^3.12.3",
         "bootstrap": "^5.3.0",
         "chart.js": "^4.3.3",
+        "chartjs-adapter-date-fns": "^3.0.0",
         "chartjs-chart-sankey": "^0.12.0",
         "date-fns": "^2.30.0",
+        "i18n-js": "^4.3.0",
         "store": "^2.0.12"
     }
 }

public/build/manifest.json

@@ -24,7 +24,7 @@
     "src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"
   },
   "resources/assets/v2/dashboard.js": {
-    "file": "assets/dashboard-9172f6d4.js",
+    "file": "assets/dashboard-9c513338.js",
     "isEntry": true,
     "src": "resources/assets/v2/dashboard.js"
   },

resources/assets/v2/bootstrap.js

@@ -35,7 +35,9 @@ Promise.all([
     }
 
     // save local in window.__ something
-    window.__localeId__ = values[3];
+    window.__localeId__ = values[2];
+    store.set('language', values[3]);
+    store.set('locale', values[3]);
 
     const event = new Event('firefly-iii-bootstrapped');
     document.dispatchEvent(event);

resources/assets/v2/dashboard.js

@@ -28,7 +28,54 @@ import sankey from './pages/dashboard/sankey.js';
 import subscriptions from './pages/dashboard/subscriptions.js';
 import piggies from './pages/dashboard/piggies.js';
 
-const comps = {dates, boxes, accounts, budgets, categories, sankey, subscriptions, piggies};
+
+import {
+    Chart,
+    LineController,
+    LineElement,
+    PieController,
+    BarController,
+    BarElement,
+    TimeScale,
+    ArcElement,
+    LinearScale,
+    Legend,
+    Filler,
+    Colors,
+    CategoryScale,
+    PointElement,
+    Tooltip
+} from "chart.js";
+import 'chartjs-adapter-date-fns';
+
+// register things
+Chart.register({
+    LineController,
+    LineElement,
+    ArcElement,
+    BarController,
+    TimeScale,
+    PieController,
+    BarElement,
+    Filler,
+    Colors,
+    LinearScale,
+    CategoryScale,
+    PointElement,
+    Tooltip,
+    Legend
+});
+
+const comps = {
+    dates,
+    boxes,
+    accounts,
+    budgets,
+    categories,
+    sankey,
+    subscriptions,
+    piggies
+};
 
 function loadPage(comps) {
     Object.keys(comps).forEach(comp => {

resources/assets/v2/pages/dashboard/accounts.js

@@ -18,20 +18,20 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-//import ApexCharts from "apexcharts";
 import {getVariable} from "../../store/get-variable.js";
 import {setVariable} from "../../store/set-variable.js";
 import Dashboard from "../../api/v2/chart/account/dashboard.js";
 import formatMoney from "../../util/format-money.js";
 import Get from "../../api/v2/model/account/get.js";
-//import Chart from "chart.js/auto";
+import {Chart} from 'chart.js';
-import {Chart} from "chart.js";
+import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
 
 // this is very ugly, but I have no better ideas at the moment to save the currency info
 // for each series.
 let currencies = [];
 let chart = null;
 let chartData = null;
+let afterPromises = false;
 export default () => ({
     loading: false,
     loadingAccounts: false,
@@ -47,20 +47,16 @@ export default () => ({
         dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
             this.chartData = response.data;
             this.drawChart(this.generateOptions(this.chartData));
+            this.loading = false;
         });
     },
     generateOptions(data) {
         currencies = [];
-        let options = {
+        let options = getDefaultChartSettings('line');
-            type: 'line',
-            data: {
-                labels: [],
-                datasets: []
-            },
-        };
 
         for (let i = 0; i < data.length; i++) {
             if (data.hasOwnProperty(i)) {
+                let yAxis = 'y';
                 let current = data[i];
                 let dataset = {};
                 let collection = [];
@@ -74,22 +70,43 @@ export default () => ({
                 // use the "native" currency code and use the "native_entries" as array
                 if (this.autoConversion) {
                     currencies.push(current.native_code);
+                    dataset.currency_code = current.native_code;
                     collection = Object.values(current.native_entries);
+                    yAxis = 'y' + current.native_code;
                 }
                 if (!this.autoConversion) {
+                    yAxis = 'y' + current.currency_code;
+                    dataset.currency_code = current.currency_code;
                     currencies.push(current.currency_code);
                     collection = Object.values(current.entries);
                 }
+                dataset.yAxisID = yAxis;
                 dataset.data = collection;
 
-                for (const [ii, value] of Object.entries(collection)) {
+                // add data set to the correct Y Axis:
-                    //entry.push({x: format(new Date(ii), 'yyyy-MM-dd'), y: parseFloat(value)});
-                }
-                options.data.datasets.push(dataset);
-                //options.series.push({name: current.label, data: entry});
-            }
-        }
 
+                options.data.datasets.push(dataset);
+            }
+        }
+        // for each entry in currencies, add a new y-axis:
+        for (let currency in currencies) {
+            if (currencies.hasOwnProperty(currency)) {
+                let code = 'y' + currencies[currency];
+                if (!options.options.scales.hasOwnProperty(code)) {
+                    options.options.scales[code] = {
+                        id: currency,
+                        type: 'linear',
+                        position: 1 === parseInt(currency) ? 'right' : 'left',
+                        ticks: {
+                            callback: function (value, index, values) {
+                                return formatMoney(value, currencies[currency]);
+                            }
+                        }
+                    };
+
+                }
+            }
+        }
         return options;
     },
     loadChart() {
@@ -108,31 +125,33 @@ export default () => ({
     drawChart(options) {
         if (null !== chart) {
             // chart already in place, refresh:
-            chart.data.datasets = options.data.datasets;
+            chart.options = options.options;
+            chart.data = options.data;
             chart.update();
             return;
         }
         chart = new Chart(document.querySelector("#account-chart"), options);
     },
     loadAccounts() {
-        console.log('loadAccounts');
+        // console.log('loadAccounts');
         if (true === this.loadingAccounts) {
-            console.log('loadAccounts CANCELLED');
+            // console.log('loadAccounts CANCELLED');
             return;
         }
         this.loadingAccounts = true;
         if (this.accountList.length > 0) {
-            console.log('NO need to load account data');
+            // console.log('NO need to load account data');
             this.loadingAccounts = false;
             return;
         }
-        console.log('loadAccounts continue!');
+        // console.log('loadAccounts continue!');
         const max = 10;
         let totalAccounts = 0;
         let count = 0;
         let accounts = [];
         Promise.all([getVariable('frontpageAccounts'),]).then((values) => {
             totalAccounts = values[0].length;
+            //console.log(values[0]);
             for (let i in values[0]) {
                 let account = values[0];
                 if (account.hasOwnProperty(i)) {
@@ -166,7 +185,7 @@ export default () => ({
                                 }
                                 groups.push(group);
                             }
-                            console.log(parent);
+                            // console.log(parent);
                             accounts.push({
                                 name: parent.attributes.name,
                                 id: parent.id,
@@ -177,6 +196,7 @@ export default () => ({
                             count++;
                             if (count === totalAccounts) {
                                 this.accountList = accounts;
+                                this.loadingAccounts = false;
                             }
                         });
                     });
@@ -187,13 +207,20 @@ export default () => ({
     },
 
     init() {
+        // console.log('accounts init');
         Promise.all([getVariable('viewRange', '1M'), getVariable('autoConversion', false),]).then((values) => {
+            //console.log('accounts after promises');
             this.autoConversion = values[1];
+            afterPromises = true;
             // main dashboard chart:
             this.loadChart();
             this.loadAccounts();
         });
         window.store.observe('end', () => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('accounts observe end');
             chartData = null;
             this.accountList = [];
             // main dashboard chart:
@@ -201,6 +228,10 @@ export default () => ({
             this.loadAccounts();
         });
         window.store.observe('autoConversion', () => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('accounts observe autoconversion');
             this.loadChart();
             this.loadAccounts();
         });

resources/assets/v2/pages/dashboard/boxes.js

@@ -23,6 +23,7 @@ import {format} from "date-fns";
 import {getVariable} from "../../store/get-variable.js";
 import formatMoney from "../../util/format-money.js";
 
+let afterPromises = false;
 
 export default () => ({
     balanceBox: {amounts: [], subtitles: []},
@@ -173,35 +174,43 @@ export default () => ({
                 this.balanceBox.subtitles.push(subtitles[i]);
             }
         }
+        this.loading = false;
     },
     loadBoxes() {
-
         if (true === this.loading) {
             return;
         }
         this.loading = true;
         if (null === this.boxData) {
             this.getFreshData();
+            return;
         }
-        if (null !== this.boxData) {
         this.generateOptions(this.boxData);
-            //this.drawChart();
-        }
-
         this.loading = false;
     },
 
     // Getter
     init() {
+        // console.log('boxes init');
         Promise.all([getVariable('viewRange'), getVariable('autoConversion', false)]).then((values) => {
+            // console.log('boxes after promises');
+            afterPromises = true;
             this.autoConversion = values[1];
             this.loadBoxes();
         });
         window.store.observe('end', () => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('boxes observe end');
             this.boxData = null;
             this.loadBoxes();
         });
         window.store.observe('autoConversion', (newValue) => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('boxes observe autoConversion');
             this.autoConversion = newValue;
             this.loadBoxes();
         });

resources/assets/v2/pages/dashboard/budgets.js

@@ -19,14 +19,26 @@
  */
 import {getVariable} from "../../store/get-variable.js";
 import Dashboard from "../../api/v2/chart/budget/dashboard.js";
-// todo optimize
-import Chart from 'chart.js/auto';
 import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
 import formatMoney from "../../util/format-money.js";
+import {Chart} from 'chart.js';
+import {I18n} from "i18n-js";
 
 let currencies = [];
 let chart = null;
 let chartData = null;
+let afterPromises = false;
+
+let language;
+let i18n; // for translating items in the chart.
+
+async function loadTranslations(i18n, locale) {
+    const response = await fetch(`./v2/i18n/${locale}.json`);
+    const translations = await response.json();
+
+    i18n.store(translations);
+}
+
 
 export default () => ({
     loading: false,
@@ -136,19 +148,37 @@ export default () => ({
 
 
     init() {
-        Promise.all([getVariable('autoConversion', false),]).then((values) => {
+        // console.log('budgets init');
+        Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
+
+            i18n = new I18n();
+            loadTranslations(i18n, values[1]);
+            // load translations.
+            //i18n = require('../../lang/' + values[1] + '.js').default;
+            //import lang from '../../lang/' + values[1] + '.js';
+            //language = values[1];
+
             this.autoConversion = values[0];
+            afterPromises = true;
             if (false === this.loading) {
                 this.loadChart();
             }
         });
         window.store.observe('end', () => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('boxes observe end');
             if (false === this.loading) {
                 this.chartData = null;
                 this.loadChart();
             }
         });
         window.store.observe('autoConversion', (newValue) => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('boxes observe autoConversion');
             this.autoConversion = newValue;
             if (false === this.loading) {
                 this.loadChart();

resources/assets/v2/pages/dashboard/categories.js

@@ -19,15 +19,13 @@
  */
 import {getVariable} from "../../store/get-variable.js";
 import Dashboard from "../../api/v2/chart/category/dashboard.js";
-//import ApexCharts from "apexcharts";
-import formatMoney from "../../util/format-money.js";
 import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
-import Chart from "chart.js/auto";
+import {Chart} from "chart.js";
 
 let currencies = [];
-
 let chart = null;
 let chartData = null;
+let afterPromises = false;
 
 export default () => ({
     loading: false,
@@ -142,15 +140,23 @@ export default () => ({
         this.getFreshData();
     },
     init() {
+        // console.log('categories init');
         Promise.all([getVariable('autoConversion', false),]).then((values) => {
             this.autoConversion = values[0];
+            afterPromises = true;
             this.loadChart();
         });
         window.store.observe('end', () => {
+            if (!afterPromises) {
+                return;
+            }
             this.chartData = null;
             this.loadChart();
         });
         window.store.observe('autoConversion', (newValue) => {
+            if (!afterPromises) {
+                return;
+            }
             this.autoConversion = newValue;
             this.loadChart();
         });

resources/assets/v2/pages/dashboard/piggies.js

@@ -19,10 +19,10 @@
  */
 import {getVariable} from "../../store/get-variable.js";
 import Get from "../../api/v2/model/piggy-bank/get.js";
-
+import {Chart} from 'chart.js';
-let currencies = [];
 
 let apiData = {};
+let afterPromises = false;
 
 export default () => ({
     loading: false,
@@ -106,16 +106,27 @@ export default () => ({
         this.getFreshData();
     },
     init() {
+        // console.log('piggies init');
         apiData = [];
         Promise.all([getVariable('autoConversion', false)]).then((values) => {
+            // console.log('piggies after promises');
+            afterPromises = true;
             this.autoConversion = values[0];
             this.loadPiggyBanks();
         });
         window.store.observe('end', () => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('piggies observe end');
             apiData = [];
             this.loadPiggyBanks();
         });
         window.store.observe('autoConversion', (newValue) => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('piggies observe autoConversion');
             this.autoConversion = newValue;
             this.loadPiggyBanks();
         });

resources/assets/v2/pages/dashboard/sankey.js

@@ -20,13 +20,14 @@
 import {getVariable} from "../../store/get-variable.js";
 import Get from "../../api/v2/model/transaction/get.js";
 import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
-import Chart from "chart.js/auto";
+import {Chart} from 'chart.js';
 import {Flow, SankeyController} from 'chartjs-chart-sankey';
 
-Chart.register(SankeyController, Flow);
+Chart.register({SankeyController, Flow});
+
 
 let currencies = [];
-
+let afterPromises = false;
 let chart = null;
 let transactions = [];
 
@@ -297,24 +298,31 @@ export default () => ({
         this.getFreshData();
     },
     init() {
+        // console.log('sankey init');
         transactions = [];
         Promise.all([getVariable('autoConversion', false), getVariable('sankeyGrouping', 'account')]).then((values) => {
+            // console.log('sankey after promises');
+            afterPromises = true;
             this.autoConversion = values[0];
             this.sankeyGrouping = values[1];
             this.loadChart();
         });
         window.store.observe('end', () => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('sankey observe end');
             this.transactions = [];
             this.loadChart();
         });
         window.store.observe('autoConversion', (newValue) => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('sankey observe autoConversion');
             this.autoConversion = newValue;
             this.loadChart();
         });
-        window.store.observe('sankeyGrouping', (newValue) => {
-            this.sankeyGrouping = newValue;
-            this.loadChart();
-        });
     },
 
 });

resources/assets/v2/pages/dashboard/subscriptions.js

@@ -19,14 +19,13 @@
  */
 import {getVariable} from "../../store/get-variable.js";
 import Get from "../../api/v2/model/subscription/get.js";
-import Chart from 'chart.js/auto';
 import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
-import formatMoney from "../../util/format-money.js";
 import {format} from "date-fns";
+import {Chart} from 'chart.js';
 
-let currencies = [];
 let chart = null;
 let chartData = null;
+let afterPromises = false;
 
 export default () => ({
     loading: false,
@@ -129,19 +128,30 @@ export default () => ({
 
 
     init() {
+        // console.log('subscriptions init');
         Promise.all([getVariable('autoConversion', false),]).then((values) => {
+            // console.log('subscriptions after promises');
             this.autoConversion = values[0];
+            afterPromises = true;
             if (false === this.loading) {
                 this.loadChart();
             }
         });
         window.store.observe('end', () => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('subscriptions observe end');
             if (false === this.loading) {
                 this.chartData = null;
                 this.loadChart();
             }
         });
         window.store.observe('autoConversion', (newValue) => {
+            if (!afterPromises) {
+                return;
+            }
+            // console.log('subscriptions observe autoConversion');
             this.autoConversion = newValue;
             if (false === this.loading) {
                 this.loadChart();

resources/assets/v2/support/default-chart-settings.js

@@ -18,6 +18,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import formatMoney from "../util/format-money.js";
+
 function getDefaultChartSettings(type) {
     if ('sankey' === type) {
         return {
@@ -43,6 +45,7 @@ function getDefaultChartSettings(type) {
                 datasets: [],
             },
             options: {
+                maintainAspectRatio: false,
                 scales: {
                     y: {
                         beginAtZero: true
@@ -51,7 +54,40 @@ function getDefaultChartSettings(type) {
             },
         };
     }
-    return [];
+    if ('line' === type) {
+        return {
+            options: {
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: function (tooltipItem) {
+                                console.log(tooltipItem);
+                                let currency = tooltipItem.dataset.currency_code;
+                                return formatMoney(tooltipItem.raw, currency);
+                            },
+                        },
+                    },
+                },
+                maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        // The axis for this scale is determined from the first letter of the id as `'x'`
+                        // It is recommended to specify `position` and / or `axis` explicitly.
+                        type: 'time',
+                        time: {
+                            tooltipFormat: 'PP',
+                        }
+                    },
+                },
+            },
+            type: 'line',
+            data: {
+                labels: [],
+                datasets: []
+            },
+        };
+    }
+    return {};
 }
 
 export {getDefaultChartSettings};

resources/views/v2/index.blade.php

@@ -20,7 +20,7 @@
                                                               title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.yourAccounts') }}</a>
                                     </h3>
                                 </div>
-                                <div class="card-body p-0">
+                                <div class="card-body p-0" style="position: relative;height:400px;">
                                     <canvas id="account-chart"></canvas>
                                 </div>
                                 <div class="card-footer text-end">
@@ -51,12 +51,10 @@
                                                               title="{{ __('firefly.go_to_budgets') }}">{{ __('firefly.budgetsAndSpending') }}</a>
                                     </h3>
                                 </div>
-                                <div class="card-body p-0">
+                                <div class="card-body p-0" style="position: relative;height:350px;">
-                                    <div>
                                     <canvas id="budget-chart"></canvas>
                                 </div>
                             </div>
-                            </div>
 
                         </div>
                     </div>
@@ -68,7 +66,7 @@
                                                               title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.categories') }}</a>
                                     </h3>
                                 </div>
-                                <div class="card-body p-0">
+                                <div class="card-body p-0" style="position: relative;height:350px;">
                                     <canvas id="category-chart"></canvas>
                                 </div>
                             </div>
@@ -77,6 +75,11 @@
                 </div>
                 <div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
                     <div class="row">
+                        <template x-if="loadingAccounts">
+                            <p class="text-center">
+                                <em class="fa-solid fa-spinner fa-spin"></em>
+                            </p>
+                        </template>
                         <template x-for="account in accountList">
                             <div class="col-12 mb-2" x-model="account">
                                 <div class="card">

resources/views/v2/partials/dashboard/boxes.blade.php

@@ -12,10 +12,16 @@
                         </span>
                     </template>
                 </h3>
-
+                <template x-if="loading">
+                    <p>
+                        <em class="fa-solid fa-spinner fa-spin"></em>
+                    </p>
+                </template>
+                <template x-if="!loading">
                     <p>
                         <a href="{{ route('reports.report.default', ['allAssetAccounts',$start->format('Ymd'),$end->format('Ymd')]) }}">{{ __('firefly.in_out_period') }}</a>
                     </p>
+                </template>
             </div>
             <span class="small-box-icon">
                 <i class="fa-solid fa-scale-balanced"></i>
@@ -46,7 +52,14 @@
                     </template>
                 </h3>
 
+                <template x-if="loading">
+                    <p>
+                        <em class="fa-solid fa-spinner fa-spin"></em>
+                    </p>
+                </template>
+                <template x-if="!loading">
                     <p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p>
+                </template>
             </div>
             <span class="small-box-icon">
                 <em class="fa-regular fa-calendar"></em>
@@ -77,7 +90,14 @@
                     </template>
                 </h3>
 
+                <template x-if="loading">
+                    <p>
+                        <em class="fa-solid fa-spinner fa-spin"></em>
+                    </p>
+                </template>
+                <template x-if="!loading">
                     <p><a href="{{ route('budgets.index') }}">{{ __('firefly.left_to_spend') }}</a></p>
+                </template>
             </div>
             <span class="small-box-icon">
                 <em class="fa-solid fa-money-check-dollar"></em>
@@ -108,9 +128,16 @@
                     </template>
                 </h3>
 
+                <template x-if="loading">
+                    <p>
+                        <em class="fa-solid fa-spinner fa-spin"></em>
+                    </p>
+                </template>
+                <template x-if="!loading">
                     <p>
                         <a href="{{ route('reports.report.default', ['allAssetAccounts','currentYearStart','currentYearEnd']) }}">{{ __('firefly.net_worth') }}</a>
                     </p>
+                </template>
             </div>
             <span class="small-box-icon">
                 <i class="fa-solid fa-chart-line"></i>