Inform user that their camera is starting in Lobby (#2869)

* Inform user that their camera is starting

Instead of just showing a grey box.

* Review feedback

* Show spinner from design suggestion

* useMemo

* Lint

* Lint

* Feedback from review

* Use colour that actually exists

* Refactor into Avatar superclass

* .

* Remove size limit behaviour

* Add VideoPreview tests

src/tile/TileAvatar.module.css

@@ -0,0 +1,20 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+.loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.5;
+  /* TODO: make this --cpd-color-fg-primary when available. */
+  color: var(--cpd-color-text-primary);
+}

src/tile/TileAvatar.test.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, describe, it } from "vitest";
+import { render } from "@testing-library/react";
+
+import { TileAvatar } from "./TileAvatar";
+
+describe("TileAvatar", () => {
+  it("should show loading spinner when loading", () => {
+    const { container } = render(
+      <TileAvatar id="@a:example.org" name="Alice" size={96} loading={true} />,
+    );
+    expect(container.querySelector(".loading")).toBeInTheDocument();
+  });
+
+  it("should not show loading spinner when not loading", () => {
+    const { container } = render(
+      <TileAvatar id="@a:example.org" name="Alice" size={96} loading={false} />,
+    );
+    expect(container.querySelector(".loading")).not.toBeInTheDocument();
+  });
+});

src/tile/TileAvatar.tsx

@@ -0,0 +1,30 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import { InlineSpinner } from "@vector-im/compound-web";
+
+import styles from "./TileAvatar.module.css";
+import { Avatar, type Props as AvatarProps } from "../Avatar";
+
+interface Props extends AvatarProps {
+  size: number;
+  loading?: boolean;
+}
+
+export const TileAvatar: FC<Props> = ({ size, loading, ...props }) => {
+  return (
+    <div>
+      {loading && (
+        <div className={styles.loading}>
+          <InlineSpinner size={size / 3} />
+        </div>
+      )}
+      <Avatar size={size} {...props} />
+    </div>
+  );
+};