fix(frontend): 瞬間的にstreamから切断された場合にもstream indicatorが出てしまうのを修正

CHANGELOG.md

@@ -9,6 +9,8 @@
 - Fix: URLプレビューのプレイヤーをウィンドウで開いたとき、プレイヤーが読み込まれるまでの間 `Invalid URL` と表示される問題を修正
 - Fix: 一部の実績が正しく表示されない問題を修正
 - Fix: アクセストークン発行時のダイアログのタイトルが「確認コード」となっているのを修正
+- Fix: リアルタイム通信の接続が瞬間的に切れすぐに復旧した場合には再接続を促すダイアログが表示されないように  
+  (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/172)
 
 ### Server
 - Enhance: リモートノートクリーニングジョブのスキップ処理のパフォーマンス改善

packages/frontend/src/ui/_common_/stream-indicator.vue

@@ -24,13 +24,19 @@ import { store } from '@/store.js';
 
 const zIndex = os.claimZIndex('high');
 
+const stream = useStream();
 const hasDisconnected = ref(false);
+let timeoutId: number | null = null;
 
 function onDisconnected() {
-	hasDisconnected.value = true;
+	if (timeoutId != null) window.clearTimeout(timeoutId);
+	timeoutId = window.setTimeout(() => {
+		hasDisconnected.value = true;
+	}, 5000);
 }
 
 function resetDisconnected() {
+	if (timeoutId != null) window.clearTimeout(timeoutId);
 	hasDisconnected.value = false;
 }
 
@@ -39,10 +45,13 @@ function reload() {
 }
 
 if (store.s.realtimeMode) {
-	useStream().on('_disconnected_', onDisconnected);
+	stream.on('_connected_', resetDisconnected);
+	stream.on('_disconnected_', onDisconnected);
 
 	onUnmounted(() => {
-		useStream().off('_disconnected_', onDisconnected);
+		if (timeoutId != null) window.clearTimeout(timeoutId);
+		stream.off('_connected_', resetDisconnected);
+		stream.off('_disconnected_', onDisconnected);
 	});
 }
 </script>