From cf4976da2f5600a4ec4b9629c80ad860b35a6ee4 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Wed, 22 Apr 2026 01:29:44 +0300
Subject: [PATCH] fix(telegram): load chats/listeners before expanding to fix
 slide animation height

---
 frontend/src/routes/bots/TelegramBotTab.svelte | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/bots/TelegramBotTab.svelte b/frontend/src/routes/bots/TelegramBotTab.svelte
index 7088fa0..2d14a33 100644
--- a/frontend/src/routes/bots/TelegramBotTab.svelte
+++ b/frontend/src/routes/bots/TelegramBotTab.svelte
@@ -81,13 +81,14 @@
 		};
 	}
 
-	function toggleSection(botId: number, section: string) {
+	async function toggleSection(botId: number, section: string) {
 		if (expandedSection[botId] === section) {
 			expandedSection = { ...expandedSection, [botId]: '' };
 			return;
 		}
+		if (section === 'chats' && !chats[botId]) await loadChats(botId);
+		else if (section === 'listeners' && !botListenerStatus[botId]) await loadListenerStatus(botId);
 		expandedSection = { ...expandedSection, [botId]: section };
-		if (section === 'chats') loadChats(botId);
 	}
 
 	async function loadChats(botId: number) {
@@ -344,12 +345,14 @@
 					<div class="flex items-center gap-1 flex-shrink-0 flex-wrap">
 						<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => editBot(bot)} />
 						<button onclick={() => toggleSection(bot.id, 'chats')}
-							class="text-xs text-[var(--color-muted-foreground)] hover:underline px-2 py-1 whitespace-nowrap">
-							{t('telegramBot.chats')} {expandedSection[bot.id] === 'chats' ? '▲' : '▼'}
+							disabled={chatsLoading[bot.id]}
+							class="text-xs text-[var(--color-muted-foreground)] hover:underline px-2 py-1 whitespace-nowrap disabled:opacity-50">
+							{t('telegramBot.chats')} {chatsLoading[bot.id] ? '…' : expandedSection[bot.id] === 'chats' ? '▲' : '▼'}
 						</button>
-						<button onclick={() => { toggleSection(bot.id, 'listeners'); if (expandedSection[bot.id] === 'listeners') loadListenerStatus(bot.id); }}
-							class="text-xs text-[var(--color-muted-foreground)] hover:underline px-2 py-1 whitespace-nowrap">
-							{t('commandTracker.listeners')} {expandedSection[bot.id] === 'listeners' ? '▲' : '▼'}
+						<button onclick={() => toggleSection(bot.id, 'listeners')}
+							disabled={botListenerLoading[bot.id]}
+							class="text-xs text-[var(--color-muted-foreground)] hover:underline px-2 py-1 whitespace-nowrap disabled:opacity-50">
+							{t('commandTracker.listeners')} {botListenerLoading[bot.id] ? '…' : expandedSection[bot.id] === 'listeners' ? '▲' : '▼'}
 						</button>
 						<IconButton icon="mdiSync" title={t('telegramBot.syncCommands')} onclick={() => syncCommands(bot.id)} disabled={modeChanging[bot.id]} />
 						<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => remove(bot.id)} variant="danger" />