From 24c0504cb02f0b7456de62608fd0ca4828ead508 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 16 Apr 2026 08:05:39 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/room.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index ccd33dea9e..04ae524998 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -8,11 +8,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="[$style.screen, { [$style.zen]: isZenMode }]">
 		<canvas ref="canvas" :class="$style.canvas" tabindex="-1" :style="{ visibility: controller.isReady.value ? 'visible' : 'hidden' }"></canvas>
 
-		<div v-if="!controller.isReady.value" :class="$style.loading">
-			<div :class="$style.progressBar">
-				<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div>
+		<Transition
+			:enterActiveClass="$style.transition_fade_enterActive"
+			:leaveActiveClass="$style.transition_fade_leaveActive"
+			:enterFromClass="$style.transition_fade_enterFrom"
+			:leaveToClass="$style.transition_fade_leaveTo"
+		>
+			<div v-if="!controller.isReady.value" :class="$style.loading">
+				<div :class="$style.progressBar">
+					<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div>
+				</div>
 			</div>
-		</div>
+		</Transition>
 
 		<template v-if="!isZenMode">
 			<div v-if="controller.isReady.value" class="_buttonsCenter" :class="$style.overlayControls">
@@ -386,6 +393,7 @@ definePage(() => ({
 	height: 100%;
 	display: grid;
 	place-items: center;
+	background: var(--MI_THEME-bg);
 }
 
 .progressBar {
@@ -401,4 +409,13 @@ definePage(() => ({
 	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 	transition: all 0.5s cubic-bezier(0,.5,.5,1);
 }
+
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
+	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
+	opacity: 0;
+}
 </style>