From 88d2569ab4be175e9c37d842728c6a66e8c3c859 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Tue, 26 Nov 2024 12:33:48 +0100
Subject: [PATCH] Make the loading state more subtle  - instead of a label we
 show a animated gradient

---
 locales/en-GB/app.json       |  3 +--
 src/tile/GridTile.module.css | 34 +++++++++++++++++++++++++++++++++-
 src/tile/GridTile.tsx        |  2 ++
 src/tile/MediaView.test.tsx  |  3 ++-
 src/tile/MediaView.tsx       |  5 -----
 5 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/locales/en-GB/app.json b/locales/en-GB/app.json
index 06b8e4171..6340d1609 100644
--- a/locales/en-GB/app.json
+++ b/locales/en-GB/app.json
@@ -191,7 +191,6 @@
     "expand": "Expand",
     "mute_for_me": "Mute for me",
     "muted_for_me": "Muted for me",
-    "volume": "Volume",
-    "waiting_for_media": "Waiting for media..."
+    "volume": "Volume"
   }
 }
diff --git a/src/tile/GridTile.module.css b/src/tile/GridTile.module.css
index bb0685120..0ec2b7e7a 100644
--- a/src/tile/GridTile.module.css
+++ b/src/tile/GridTile.module.css
@@ -18,7 +18,9 @@ borders don't support gradients */
   position: absolute;
   z-index: -1; /* Put it below the outline */
   opacity: 0; /* Hidden unless speaking */
-  transition: opacity ease 0.15s;
+  /* this only animates in one direction. In the other direction,
+  the background will disappear and the opacity has no effect.*/
+  transition: opacity ease 0.5s;
   inset: calc(-1 * var(--cpd-border-width-4));
   border-radius: var(--cpd-space-5x);
   background-blend-mode: overlay, normal;
@@ -48,6 +50,11 @@ borders don't support gradients */
   outline: var(--cpd-border-width-2) solid var(--cpd-color-bg-canvas-default) !important;
 }
 
+.tile.loading {
+  /* !important because loading border should take priority over hover */
+  outline: var(--cpd-border-width-2) solid var(--cpd-color-bg-canvas-default) !important;
+}
+
 .tile.handRaised::before {
   background: linear-gradient(
       119deg,
@@ -62,6 +69,31 @@ borders don't support gradients */
   opacity: 1;
 }
 
+.tile.loading::before {
+  background: linear-gradient(
+    var(--angle),
+    var(--cpd-color-green-900) 0%,
+    var(--cpd-color-blue-200) 100%
+  );
+  opacity: 1;
+  animation: rotate-gradient linear 2s infinite;
+}
+
+@property --angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes rotate-gradient {
+  from {
+    --angle: 0deg;
+  }
+  to {
+    --angle: 360deg;
+  }
+}
+
 @media (hover: hover) {
   .tile:hover {
     outline: var(--cpd-border-width-2) solid
diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx
index 15f7c2954..6e732ab39 100644
--- a/src/tile/GridTile.tsx
+++ b/src/tile/GridTile.tsx
@@ -42,6 +42,7 @@ import {
   useDisplayName,
   LocalUserMediaViewModel,
   RemoteUserMediaViewModel,
+  EncryptionStatus,
 } from "../state/MediaViewModel";
 import { Slider } from "../Slider";
 import { MediaView } from "./MediaView";
@@ -145,6 +146,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
         className={classNames(className, styles.tile, {
           [styles.speaking]: showSpeaking,
           [styles.handRaised]: !showSpeaking && !!handRaised,
+          [styles.loading]: encryptionStatus === EncryptionStatus.Connecting,
         })}
         nameTagLeadingIcon={
           <AudioIcon
diff --git a/src/tile/MediaView.test.tsx b/src/tile/MediaView.test.tsx
index fea4303f9..4edd86449 100644
--- a/src/tile/MediaView.test.tsx
+++ b/src/tile/MediaView.test.tsx
@@ -74,8 +74,9 @@ describe("MediaView", () => {
       render(
         <MediaView {...baseProps} video={undefined} localParticipant={false} />,
       );
+      const tile = screen.getByTestId("videoTile");
       expect(screen.getByRole("img", { name: "some name" })).toBeVisible();
-      expect(screen.getByText("video_tile.waiting_for_media")).toBeVisible();
+      expect(tile.classList).toContain("loading");
     });
   });
 
diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
index 48871abdf..b94d4a163 100644
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -120,11 +120,6 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
               />
             )}
           </div>
-          {!video && !localParticipant && (
-            <div className={styles.status}>
-              {t("video_tile.waiting_for_media")}
-            </div>
-          )}
           {/* TODO: Bring this back once encryption status is less broken */}
           {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>