From 74ff01ba3a402ba5597dbde3a2f2d4792d91e3c8 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 31 Dec 2023 08:27:12 +0100
Subject: [PATCH] fix: fix long initial time with huge print history (#1714)

* refactor: refactor history page and list panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* fix: fix long initial time with huge print history

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* refactor: add "All" to locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* feat: add button to statistic chart

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* locale(de): update german locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* refactor: remove unused icon import

Signed-off-by: Stefan Dej <meteyou@gmail.com>

* locale: apply suggestions from code review

Co-authored-by: rackrick <45207681+rackrick@users.noreply.github.com>

---------

Signed-off-by: Stefan Dej <meteyou@gmail.com>
Co-authored-by: rackrick <45207681+rackrick@users.noreply.github.com>
---
 src/components/panels/HistoryListPanel.vue    | 117 +++++++++---------
 .../panels/HistoryStatisticsPanel.vue         |  29 ++++-
 src/locales/de.json                           |   3 +-
 src/locales/en.json                           |   3 +-
 src/pages/History.vue                         |   6 +-
 src/store/server/history/actions.ts           |  32 +++--
 src/store/server/history/index.ts             |   1 +
 src/store/server/history/mutations.ts         |   4 +
 src/store/server/history/types.ts             |   1 +
 9 files changed, 122 insertions(+), 74 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 427101cbd..3ef8af0b9 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -15,7 +15,7 @@
                             outlined
                             clearable
                             hide-details
-                            dense></v-text-field>
+                            dense />
                     </v-col>
                     <v-col class="offset-4 col-4 d-flex align-center justify-end">
                         <template v-if="selectedJobs.length">
@@ -27,25 +27,30 @@
                                 <v-icon>{{ mdiDelete }}</v-icon>
                             </v-btn>
                         </template>
-                        <v-btn
-                            :title="$t('History.TitleExportHistory')"
-                            class="px-2 minwidth-0 ml-3"
-                            @click="exportHistory">
-                            <v-icon>{{ mdiDatabaseExportOutline }}</v-icon>
-                        </v-btn>
-                        <v-btn
-                            :title="$t('History.TitleRefreshHistory')"
-                            class="px-2 minwidth-0 ml-3"
-                            @click="refreshHistory">
-                            <v-icon>{{ mdiRefresh }}</v-icon>
-                        </v-btn>
-                        <v-menu :offset-y="true" :close-on-content-click="false" title="Setup current list">
+                        <v-tooltip v-if="!allLoaded" top>
                             <template #activator="{ on, attrs }">
                                 <v-btn
+                                    :loading="loadings.includes('historyLoadAll')"
                                     class="px-2 minwidth-0 ml-3"
-                                    :title="$t('History.TitleSettings')"
                                     v-bind="attrs"
-                                    v-on="on">
+                                    v-on="on"
+                                    @click="refreshHistory">
+                                    <v-icon>{{ mdiDatabaseArrowDownOutline }}</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>{{ $t('History.LoadCompleteHistory') }}</span>
+                        </v-tooltip>
+                        <v-tooltip top>
+                            <template #activator="{ on, attrs }">
+                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on" @click="exportHistory">
+                                    <v-icon>{{ mdiDatabaseExportOutline }}</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>{{ $t('History.TitleExportHistory') }}</span>
+                        </v-tooltip>
+                        <v-menu :offset-y="true" :close-on-content-click="false">
+                            <template #activator="{ on, attrs }">
+                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on">
                                     <v-icon>{{ mdiCog }}</v-icon>
                                 </v-btn>
                             </template>
@@ -60,9 +65,9 @@
                                             hide-details
                                             :input-value="status.showInTable"
                                             :label="`${status.displayName} (${status.value})`"
-                                            @change="changeStatusVisible(status)"></v-checkbox>
+                                            @change="changeStatusVisible(status)" />
                                     </v-list-item>
-                                    <v-divider></v-divider>
+                                    <v-divider />
                                 </template>
                                 <v-list-item v-for="header of configHeaders" :key="header.key" class="minHeight36">
                                     <v-checkbox
@@ -70,14 +75,14 @@
                                         class="mt-0"
                                         hide-details
                                         :label="header.text"
-                                        @change="changeColumnVisible(header.value)"></v-checkbox>
+                                        @change="changeColumnVisible(header.value)" />
                                 </v-list-item>
                             </v-list>
                         </v-menu>
                     </v-col>
                 </v-row>
             </v-card-text>
-            <v-divider class="mb-3"></v-divider>
+            <v-divider class="mb-3" />
             <v-data-table
                 v-model="selectedJobs"
                 :items="jobs"
@@ -114,7 +119,7 @@
                                 v-ripple
                                 :value="isSelected"
                                 class="pa-0 mr-0"
-                                @click.stop="select(!isSelected)"></v-simple-checkbox>
+                                @click.stop="select(!isSelected)" />
                         </td>
                         <td class="px-0 text-center" style="width: 32px">
                             <template v-if="!item.exists">
@@ -131,10 +136,7 @@
                                                 height="32"
                                                 v-bind="attrs"
                                                 v-on="on" />
-                                            <v-progress-circular
-                                                slot="preloader"
-                                                indeterminate
-                                                color="primary"></v-progress-circular>
+                                            <v-progress-circular slot="preloader" indeterminate color="primary" />
                                             <v-icon slot="error">{{ mdiFile }}</v-icon>
                                         </vue-load-image>
                                     </template>
@@ -144,10 +146,7 @@
                             <template v-else-if="getSmallThumbnail(item)">
                                 <vue-load-image>
                                     <img slot="image" :src="getSmallThumbnail(item)" width="32" height="32" />
-                                    <v-progress-circular
-                                        slot="preloader"
-                                        indeterminate
-                                        color="primary"></v-progress-circular>
+                                    <v-progress-circular slot="preloader" indeterminate color="primary" />
                                     <v-icon slot="error">{{ mdiFile }}</v-icon>
                                 </vue-load-image>
                             </template>
@@ -164,7 +163,7 @@
                                             {{ mdiNotebook }}
                                         </v-icon>
                                     </template>
-                                    <span v-html="item.note.replaceAll('\n', '<br />')"></span>
+                                    <span v-html="item.note.replaceAll('\n', '<br />')" />
                                 </v-tooltip>
                             </template>
                             <v-tooltip top>
@@ -252,14 +251,14 @@
                             <v-col class="text-right">{{ detailsDialog.item.filename }}</v-col>
                         </v-row>
                         <template v-if="'metadata' in detailsDialog.item && 'size' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.Filesize') }}</v-col>
                                 <v-col class="text-right">{{ formatFilesize(detailsDialog.item.metadata.size) }}</v-col>
                             </v-row>
                         </template>
                         <template v-if="'metadata' in detailsDialog.item && 'modified' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.LastModified') }}</v-col>
                                 <v-col class="text-right">
@@ -267,7 +266,7 @@
                                 </v-col>
                             </v-row>
                         </template>
-                        <v-divider class="my-3"></v-divider>
+                        <v-divider class="my-3" />
                         <v-row>
                             <v-col>{{ $t('History.Status') }}</v-col>
                             <v-col class="text-right">
@@ -278,13 +277,13 @@
                                 }}
                             </v-col>
                         </v-row>
-                        <v-divider class="my-3"></v-divider>
+                        <v-divider class="my-3" />
                         <v-row>
                             <v-col>{{ $t('History.StartTime') }}</v-col>
                             <v-col class="text-right">{{ formatDateTime(detailsDialog.item.start_time * 1000) }}</v-col>
                         </v-row>
                         <template v-if="'end_time' in detailsDialog.item && detailsDialog.item.end_time > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EndTime') }}</v-col>
                                 <v-col class="text-right">
@@ -294,7 +293,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'estimated_time' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EstimatedTime') }}</v-col>
                                 <v-col class="text-right">
@@ -303,7 +302,7 @@
                             </v-row>
                         </template>
                         <template v-if="detailsDialog.item.print_duration > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.PrintDuration') }}</v-col>
                                 <v-col class="text-right">
@@ -312,7 +311,7 @@
                             </v-row>
                         </template>
                         <template v-if="detailsDialog.item.total_duration > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.TotalDuration') }}</v-col>
                                 <v-col class="text-right">
@@ -322,7 +321,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'filament_total' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EstimatedFilamentWeight') }}</v-col>
                                 <v-col class="text-right">
@@ -332,7 +331,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'filament_total' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.EstimatedFilament') }}</v-col>
                                 <v-col class="text-right">
@@ -341,7 +340,7 @@
                             </v-row>
                         </template>
                         <template v-if="detailsDialog.item.filament_used > 0">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FilamentUsed') }}</v-col>
                                 <v-col class="text-right">{{ Math.round(detailsDialog.item.filament_used) }} mm</v-col>
@@ -352,7 +351,7 @@
                                 'metadata' in detailsDialog.item &&
                                 'first_layer_extr_temp' in detailsDialog.item.metadata
                             ">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FirstLayerExtTemp') }}</v-col>
                                 <v-col class="text-right">
@@ -365,7 +364,7 @@
                                 'metadata' in detailsDialog.item &&
                                 'first_layer_bed_temp' in detailsDialog.item.metadata
                             ">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FirstLayerBedTemp') }}</v-col>
                                 <v-col class="text-right">
@@ -377,7 +376,7 @@
                             v-if="
                                 'metadata' in detailsDialog.item && 'first_layer_height' in detailsDialog.item.metadata
                             ">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.FirstLayerHeight') }}</v-col>
                                 <v-col class="text-right">
@@ -387,7 +386,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'layer_height' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.LayerHeight') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.layer_height }} mm</v-col>
@@ -395,14 +394,14 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'object_height' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.ObjectHeight') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.object_height }} mm</v-col>
                             </v-row>
                         </template>
                         <template v-if="'metadata' in detailsDialog.item && 'slicer' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.Slicer') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.slicer }}</v-col>
@@ -410,7 +409,7 @@
                         </template>
                         <template
                             v-if="'metadata' in detailsDialog.item && 'slicer_version' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
+                            <v-divider class="my-3" />
                             <v-row>
                                 <v-col>{{ $t('History.SlicerVersion') }}</v-col>
                                 <v-col class="text-right">{{ detailsDialog.item.metadata.slicer_version }}</v-col>
@@ -435,7 +434,7 @@
                     </p>
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn color="" text @click="deleteDialog = false">
                         {{ $t('History.Cancel') }}
                     </v-btn>
@@ -463,7 +462,7 @@
                     </p>
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn color="" text @click="deleteSelectedDialog = false">{{ $t('History.Cancel') }}</v-btn>
                     <v-btn color="error" text @click="deleteSelectedJobs">{{ $t('History.Delete') }}</v-btn>
                 </v-card-actions>
@@ -483,16 +482,12 @@
                 <v-card-text class="pb-0">
                     <v-row>
                         <v-col>
-                            <v-textarea
-                                v-model="noteDialog.note"
-                                outlined
-                                hide-details
-                                :label="$t('History.Note')"></v-textarea>
+                            <v-textarea v-model="noteDialog.note" outlined hide-details :label="$t('History.Note')" />
                         </v-col>
                     </v-row>
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn color="" text @click="noteDialog.boolShow = false">{{ $t('History.Cancel') }}</v-btn>
                     <v-btn color="primary" text @click="saveNote">{{ $t('History.Save') }}</v-btn>
                 </v-card-actions>
@@ -511,7 +506,7 @@ import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/v
 import {
     mdiDatabaseExportOutline,
     mdiDelete,
-    mdiRefresh,
+    mdiDatabaseArrowDownOutline,
     mdiCog,
     mdiPrinter,
     mdiTextBoxSearch,
@@ -531,7 +526,7 @@ import {
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDatabaseExportOutline = mdiDatabaseExportOutline
     mdiDelete = mdiDelete
-    mdiRefresh = mdiRefresh
+    mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
     mdiCog = mdiCog
     mdiPrinter = mdiPrinter
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
@@ -579,6 +574,10 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     private deleteDialog = false
     private deleteSelectedDialog = false
 
+    get allLoaded() {
+        return this.$store.state.server.history.all_loaded ?? false
+    }
+
     get jobs() {
         return this.$store.getters['server/history/getFilterdJobList'] ?? []
     }
@@ -787,6 +786,8 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     refreshHistory() {
+        this.$store.dispatch('socket/addLoading', { name: 'historyLoadAll' })
+
         this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
     }
 
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index 8e9261c6a..a282fe979 100644
--- a/src/components/panels/HistoryStatisticsPanel.vue
+++ b/src/components/panels/HistoryStatisticsPanel.vue
@@ -69,6 +69,22 @@
                                 {{ $t('History.Table') }}
                             </v-btn>
                         </v-btn-toggle>
+                        <v-tooltip v-if="!allLoaded" top>
+                            <template #activator="{ on, attrs }">
+                                <v-btn
+                                    outlined
+                                    small
+                                    :loading="loadings.includes('historyLoadAll')"
+                                    class="ml-3 minwidth-0 px-2"
+                                    color="primary"
+                                    v-bind="attrs"
+                                    v-on="on"
+                                    @click="refreshHistory">
+                                    <v-icon small>{{ mdiDatabaseArrowDownOutline }}</v-icon>
+                                </v-btn>
+                            </template>
+                            <span>{{ $t('History.LoadCompleteHistory') }}</span>
+                        </v-tooltip>
                     </div>
                 </v-col>
                 <v-col class="col-12 col-sm-12 col-md-4">
@@ -98,12 +114,13 @@ import HistoryFilamentUsage from '@/components/charts/HistoryFilamentUsage.vue'
 import HistoryPrinttimeAvg from '@/components/charts/HistoryPrinttimeAvg.vue'
 import HistoryAllPrintStatusChart from '@/components/charts/HistoryAllPrintStatusChart.vue'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
-import { mdiChartAreaspline } from '@mdi/js'
+import { mdiChartAreaspline, mdiDatabaseArrowDownOutline } from '@mdi/js'
 @Component({
     components: { Panel, HistoryFilamentUsage, HistoryPrinttimeAvg, HistoryAllPrintStatusChart },
 })
 export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     mdiChartAreaspline = mdiChartAreaspline
+    mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
 
     get selectedJobs() {
         return this.$store.state.gui.view.history.selectedJobs ?? []
@@ -197,6 +214,16 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.history.toggleChartCol2', value: newVal })
     }
 
+    get allLoaded() {
+        return this.$store.state.server.history.all_loaded ?? false
+    }
+
+    refreshHistory() {
+        this.$store.dispatch('socket/addLoading', { name: 'historyLoadAll' })
+
+        this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
+    }
+
     formatPrintTime(totalSeconds: number) {
         if (totalSeconds) {
             let output = ''
diff --git a/src/locales/de.json b/src/locales/de.json
index 56a3df8d8..5794525fe 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -351,6 +351,7 @@
         "Jobs": "Drucke",
         "LastModified": "Zuletzt geändert",
         "LayerHeight": "Schichthöhe",
+        "LoadCompleteHistory": "Lade vollständige Historie",
         "LongestPrinttime": "Druckzeit - längste",
         "Note": "Notiz",
         "ObjectHeight": "Objekthöhe",
@@ -381,8 +382,6 @@
         },
         "Table": "Tabelle",
         "TitleExportHistory": "Historie exportieren",
-        "TitleRefreshHistory": "Historie aktualisieren",
-        "TitleSettings": "Einstellungen",
         "TotalDuration": "Gesamtdauer",
         "TotalFilamentUsed": "Filament verwendet - gesamt",
         "TotalJobs": "Druckvorgänge - gesamt",
diff --git a/src/locales/en.json b/src/locales/en.json
index 643ccf94a..8cb6bda38 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -351,6 +351,7 @@
         "Jobs": "Jobs",
         "LastModified": "Last Modified",
         "LayerHeight": "Layer Height",
+        "LoadCompleteHistory": "Load complete history",
         "LongestPrinttime": "Longest Print Time",
         "Note": "Note",
         "ObjectHeight": "Object Height",
@@ -381,8 +382,6 @@
         },
         "Table": "Table",
         "TitleExportHistory": "Export History",
-        "TitleRefreshHistory": "Refresh History",
-        "TitleSettings": "Settings",
         "TotalDuration": "Total Time",
         "TotalFilamentUsed": "Total Filament Used",
         "TotalJobs": "Total Jobs",
diff --git a/src/pages/History.vue b/src/pages/History.vue
index 372b780d3..84ef0fd35 100644
--- a/src/pages/History.vue
+++ b/src/pages/History.vue
@@ -1,15 +1,13 @@
-<style scoped></style>
-
 <template>
     <div>
         <v-row>
             <v-col>
-                <history-statistics-panel></history-statistics-panel>
+                <history-statistics-panel />
             </v-col>
         </v-row>
         <v-row class="mt-0">
             <v-col>
-                <history-list-panel></history-list-panel>
+                <history-list-panel />
             </v-col>
         </v-row>
     </div>
diff --git a/src/store/server/history/actions.ts b/src/store/server/history/actions.ts
index 6f23255de..455fc8c4c 100644
--- a/src/store/server/history/actions.ts
+++ b/src/store/server/history/actions.ts
@@ -9,7 +9,11 @@ export const actions: ActionTree<ServerHistoryState, RootState> = {
     },
 
     init() {
-        Vue.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
+        Vue.$socket.emit(
+            'server.history.list',
+            { start: 0, limit: 50, max: 100 },
+            { action: 'server/history/getHistory' }
+        )
         Vue.$socket.emit('server.history.totals', {}, { action: 'server/history/getTotals' })
     },
 
@@ -18,23 +22,37 @@ export const actions: ActionTree<ServerHistoryState, RootState> = {
     },
 
     async getHistory({ commit, dispatch, state }, payload) {
-        if ('requestParams' in payload && 'start' in payload.requestParams && payload.requestParams.start === 0)
-            await commit('resetJobs')
+        if ('requestParams' in payload && (payload.requestParams?.start ?? 0) === 0) commit('resetJobs')
 
         payload.jobs?.forEach((job: ServerHistoryStateJob) => {
             if (state.jobs.findIndex((stateJob) => stateJob.job_id === job.job_id) === -1) commit('addJob', job)
         })
 
-        if (payload.requestParams?.limit > 0 && payload.jobs?.length === payload.requestParams.limit)
+        const start = payload.requestParams?.start ?? 0
+        const limit = payload.requestParams?.limit ?? 50
+        const max = payload.requestParams?.max ?? null
+
+        if (limit > 0 && (max === null || max > start + limit) && payload.jobs?.length === limit) {
             Vue.$socket.emit(
                 'server.history.list',
                 {
-                    start: payload.requestParams.start + payload.requestParams.limit,
-                    limit: payload.requestParams.limit,
+                    start: start + limit,
+                    limit: limit,
+                    max: max,
                 },
                 { action: 'server/history/getHistory' }
             )
-        else await dispatch('loadHistoryNotes')
+
+            // stop here until all pulls are done
+            return
+        }
+
+        if (payload.jobs?.length < limit) {
+            dispatch('socket/removeLoading', { name: 'historyLoadAll' }, { root: true })
+            commit('setAllLoaded')
+        }
+
+        dispatch('loadHistoryNotes')
     },
 
     loadHistoryNotes({ dispatch, rootState }) {
diff --git a/src/store/server/history/index.ts b/src/store/server/history/index.ts
index ca245f4f2..8e1acead3 100644
--- a/src/store/server/history/index.ts
+++ b/src/store/server/history/index.ts
@@ -15,6 +15,7 @@ export const getDefaultState = (): ServerHistoryState => {
             longest_job: 0,
             longest_print: 0,
         },
+        all_loaded: false,
     }
 }
 
diff --git a/src/store/server/history/mutations.ts b/src/store/server/history/mutations.ts
index 188c2fab0..9ee7a3129 100644
--- a/src/store/server/history/mutations.ts
+++ b/src/store/server/history/mutations.ts
@@ -37,4 +37,8 @@ export const mutations: MutationTree<ServerHistoryState> = {
         const index = state.jobs.findIndex((job) => job.job_id === payload)
         if (index !== -1) state.jobs.splice(index, 1)
     },
+
+    setAllLoaded(state) {
+        Vue.set(state, 'all_loaded', true)
+    },
 }
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index 2c36f048c..90b5ce7e8 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -8,6 +8,7 @@ export interface ServerHistoryState {
         longest_job: number
         longest_print: number
     }
+    all_loaded: boolean
 }
 
 export interface ServerHistoryStateJob {