diff --git a/src/interface/obsidian/src/chat_view.ts b/src/interface/obsidian/src/chat_view.ts index 8bc3c6ee..0e91d4b9 100644 --- a/src/interface/obsidian/src/chat_view.ts +++ b/src/interface/obsidian/src/chat_view.ts @@ -1014,6 +1014,7 @@ export class KhojChatView extends KhojPaneView { // Start the countdown timer UI stopSendButtonImg.getElementsByTagName("circle")[0].style.animation = "countdown 3s linear 1 forwards"; + stopSendButtonImg.getElementsByTagName("circle")[0].style.color = "var(--icon-color-active)"; // Auto send message after 3 seconds this.sendMessageTimeout = setTimeout(() => { @@ -1043,6 +1044,7 @@ export class KhojChatView extends KhojPaneView { this.mediaRecorder.start(); setIcon(transcribeButton, "mic-off"); + transcribeButton.classList.add("loading-encircle") }; // Toggle recording @@ -1057,6 +1059,7 @@ export class KhojChatView extends KhojPaneView { this.mediaRecorder.stop(); this.mediaRecorder.stream.getTracks().forEach(track => track.stop()); this.mediaRecorder = undefined; + transcribeButton.classList.remove("loading-encircle"); setIcon(transcribeButton, "mic"); } } diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index 8e3d2c6b..8902d3c9 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -598,6 +598,30 @@ img.copy-icon { } } +/* Loading Encircle */ +.loading-encircle { + position: relative; +} + +.loading-encircle::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 24px; + height: 24px; + margin-top: -16px; + margin-left: -16px; + border: 4px solid transparent; + border-top-color: var(--icon-color-active); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} @media only screen and (max-width: 600px) { div.khoj-header { display: grid;