From f0457fd8789fa4c8dbe0c5ab97c000bd1033c551 Mon Sep 17 00:00:00 2001
From: grnd-alt <git@belakkaf.net>
Date: Wed, 3 Jun 2026 16:31:02 +0200
Subject: [PATCH] fix: improve gantt rendering

Signed-off-by: grnd-alt <git@belakkaf.net>
---
 src/components/board/GanttView.vue | 58 +++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/components/board/GanttView.vue b/src/components/board/GanttView.vue
index df971b8a6..f0c06f8a5 100644
--- a/src/components/board/GanttView.vue
+++ b/src/components/board/GanttView.vue
@@ -86,22 +86,6 @@ const DAYS_PER_UNIT = {
 }
 
 const GANTT_VIEW_MODES = [
-	{
-		name: 'Hour',
-		padding: '7d',
-		step: '1h',
-		snap_at: '1h',
-		date_format: 'YYYY-MM-DD HH:',
-		lower_text: 'HH',
-		upper_text: (d, ld, lang) =>
-			!ld || d.getDate() !== ld.getDate()
-				? Intl.DateTimeFormat(lang || 'en', { month: 'short', day: 'numeric' }).format(d)
-				: '',
-		thick_line(date) {
-			return date.getDay() === 1
-		},
-		upper_text_frequency: 24,
-	},
 	{
 		name: 'Day',
 		padding: '14d',
@@ -123,6 +107,22 @@ const GANTT_VIEW_MODES = [
 			return date.getDay() === 1
 		},
 	},
+	{
+		name: 'Hour',
+		padding: '7d',
+		step: '1h',
+		snap_at: '1h',
+		date_format: 'YYYY-MM-DD HH:',
+		lower_text: 'HH',
+		upper_text: (d, ld, lang) =>
+			!ld || d.getDate() !== ld.getDate()
+				? Intl.DateTimeFormat(lang || 'en', { month: 'short', day: 'numeric' }).format(d)
+				: '',
+		thick_line(date) {
+			return date.getDay() === 1
+		},
+		upper_text_frequency: 24,
+	},
 	{
 		name: 'Week',
 		padding: '1m',
@@ -207,6 +207,31 @@ export default {
 					if (!card.duedate && !card.startdate) {
 						undatedCards.push(card)
 					} else {
+						// gantt renders everything at once so large date ranges cause performance issues on render
+						// therefore we limit the timeframe of visible tasks
+						const duedate = new Date(card.duedate)
+						switch (this.currentViewMode) {
+						case 'Hour':
+							if (duedate < new Date() - 2 * 24 * 3600 * 1000) {
+								return
+							}
+							break
+						case 'Day':
+							if (duedate < new Date() - 30 * 24 * 3600 * 1000) {
+								return
+							}
+							break
+						case 'Week':
+							if (duedate < new Date() - 90 * 24 * 3600 * 1000) {
+								return
+							}
+							break
+						case 'Month':
+							if (duedate < new Date() - 365 * 24 * 3600 * 1000) {
+								return
+							}
+							break
+						}
 						ganttTasks.push(this.cardToGanttTask(card, index))
 					}
 				})
@@ -343,7 +368,6 @@ export default {
 			})
 
 			this._patchBarDuration()
-			this.ganttInstance.change_view_mode(this.currentViewMode)
 			this.fitColumnsToWidth()
 		},
 		async updateTaskDate(task, start, end) {