diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue index 0ebf422..10e7cb5 100644 --- a/packages/frontend/src/components/StatusMonitor.vue +++ b/packages/frontend/src/components/StatusMonitor.vue @@ -64,7 +64,7 @@ :show-text="true" :text-inside="true" :format="formatPercentageText" - class="themed-progress flex-grow" + class="themed-progress flex-grow" :class="{ 'no-transition': isSwitchingSession }" /> @@ -82,7 +82,7 @@ :show-text="true" :text-inside="true" :format="formatPercentageText" - class="themed-progress flex-grow" + class="themed-progress flex-grow" :class="{ 'no-transition': isSwitchingSession }" /> {{ memDisplay }} @@ -100,7 +100,7 @@ :show-text="true" :text-inside="true" :format="formatPercentageText" - class="themed-progress flex-grow" + class="themed-progress flex-grow" :class="{ 'no-transition': isSwitchingSession }" /> {{ swapDisplay }} @@ -118,7 +118,7 @@ :show-text="true" :text-inside="true" :format="formatPercentageText" - class="themed-progress flex-grow" + class="themed-progress flex-grow" :class="{ 'no-transition': isSwitchingSession }" /> {{ diskDisplay }} @@ -352,9 +352,12 @@ const copyIpToClipboard = async (ipAddress: string | null) => { ::v-deep(.el-progress-bar__outer) { background-color: var(--header-bg-color) !important; } -::v-deep(.el-progress-bar__inner) { +::v-deep(.themed-progress .el-progress-bar__inner) { transition: width 0.3s ease-in-out; } +::v-deep(.themed-progress.no-transition .el-progress-bar__inner) { + transition: none !important; +} ::v-deep(.el-progress-bar__innerText) { font-size: 10px; }