From fd8da319e3456570f35213c74e3e431a7c529e84 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 29 Mar 2026 11:22:44 +0200
Subject: [PATCH] [mirotalk] - replace loading GIFs with pure CSS spinners

---
 .env.template              |  2 +-
 app/src/config.template.js |  2 +-
 app/src/server.js          |  2 +-
 package-lock.json          |  4 +--
 package.json               |  2 +-
 public/css/client.css      | 70 +++++++++++++++++++++++++++++++++++---
 public/js/brand.js         |  2 +-
 public/js/client.js        |  9 +++--
 public/views/client.html   | 21 +++++++-----
 9 files changed, 92 insertions(+), 22 deletions(-)

diff --git a/.env.template b/.env.template
index 7c4eb311..a80a5753 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.7.67 - Environment Configuration
+# MiroTalk P2P v.1.7.68 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index e6f2efbb..b0d6909a 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.7.67 - Configuration File
+ * MiroTalk P2P v.1.7.68 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index 5de6d9b3..9440e7f8 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.67
+ * @version 1.7.68
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 00defca8..6fe36979 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.7.67",
+    "version": "1.7.68",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.7.67",
+            "version": "1.7.68",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.5.0",
diff --git a/package.json b/package.json
index 14fae5e7..4a15a252 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.7.67",
+    "version": "1.7.68",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/client.css b/public/css/client.css
index a6ddbca9..c6742b84 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -138,15 +138,66 @@ body {
     font-size: 60px;
     font-family: 'Montserrat';
 }
-#loadingDiv img {
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
 #loadingDiv pre {
     padding: 5px;
     font-family: 'Montserrat';
 }
 
+/* Custom CSS spinner */
+.loading-spinner {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 15px;
+}
+
+.spinner-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-top-color: #fff;
+    animation: spin 1s linear infinite;
+}
+
+.spinner-ring::before {
+    content: '';
+    position: absolute;
+    inset: 6px;
+    border-radius: 50%;
+    border: 4px solid rgba(255, 255, 255, 0.05);
+    border-top-color: rgba(255, 255, 255, 0.6);
+    animation: spin 1.5s linear reverse infinite;
+}
+
+.spinner-logo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 48px;
+    height: 48px;
+    animation: pulse-logo 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse-logo {
+    0%,
+    100% {
+        opacity: 0.7;
+        transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.08);
+    }
+}
+
 /*--------------------------------------------------------------
 # Init User
 --------------------------------------------------------------*/
@@ -167,6 +218,17 @@ body {
     width: 100%;
 }
 
+.init-video-loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 8px;
+}
+
 .init-video-container video {
     z-index: 0;
     position: relative;
diff --git a/public/js/brand.js b/public/js/brand.js
index 25ff1f43..4f9bcaac 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -107,7 +107,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.7.67',
+        title: 'WebRTC P2P v1.7.68',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index 298e45af..e8bc499b 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.67
+ * @version 1.7.68
  *
  */
 
@@ -2093,6 +2093,9 @@ async function changeInitCamera(deviceId) {
             console.log('Detect Camera facing mode', camera);
             // We going to update init video stream
             initVideo.srcObject = camStream;
+            // Hide the CSS loader overlay once camera stream is attached
+            const initVideoLoader = getId('initVideoLoader');
+            if (initVideoLoader) initVideoLoader.style.display = 'none';
             initStream = camStream;
             const initVideoTrack = getVideoTrack(initStream);
             if (initVideoTrack) {
@@ -8071,6 +8074,8 @@ async function startScreenSharing(constraints, init) {
             elemDisplay(initVideo, true, 'block');
             initVideo.classList.toggle('mirror');
             initVideo.srcObject = newInitStream;
+            const initVideoLoader = getId('initVideoLoader');
+            if (initVideoLoader) initVideoLoader.style.display = 'none';
             disable(initVideoSelect, true);
             disable(initVideoBtn, true);
         } else {
@@ -13764,7 +13769,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.67',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.68',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/views/client.html b/public/views/client.html
index b862bc2e..f752634e 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -85,9 +85,12 @@
 
         <!-- show this before to join -->
 
-        <div id="loadingDiv" class="center pulsate">
+        <div id="loadingDiv" class="center">
+            <div class="loading-spinner">
+                <div class="spinner-ring"></div>
+                <img class="spinner-logo" src="../images/logo.svg" alt="logo" />
+            </div>
             <h1>Loading</h1>
-            <img class="loading-img" src="../images/loading.gif" />
             <pre>
 Please allow the camera or microphone
 access to use this app.
@@ -106,13 +109,13 @@ access to use this app.
         <div id="initUser" class="init-user hidden">
             <!-- <p>Please allow the camera & microphone access to use this app.</p> -->
             <div id="initVideoContainer" class="init-video-container">
-                <video
-                    id="initVideo"
-                    playsinline="true"
-                    autoplay=""
-                    class="mirror"
-                    poster="../images/loader.gif"
-                ></video>
+                <div id="initVideoLoader" class="init-video-loader">
+                    <div class="loading-spinner">
+                        <div class="spinner-ring"></div>
+                        <img class="spinner-logo" src="../images/logo.svg" alt="logo" />
+                    </div>
+                </div>
+                <video id="initVideo" playsinline="true" autoplay="" class="mirror"></video>
             </div>
             <div class="initComands">
                 <button id="initVideoBtn" class="fas fa-video"></button>