Update camera activity indicator (#10208)

* new indicator

* create indicators directory and update imports

* create indicators directory and update imports

* remove vite

web/src/components/indicators/CameraActivityIndicator.tsx

@@ -0,0 +1,33 @@
+function CameraActivityIndicator() {
+  return (
+    <div className="flex items-center justify-center relative z-20">
+      <div className="flex">
+        <div className="absolute size-[5px] inset-0 bg-severity_alert-dimmed rounded-full shadow-[0px_0px_10px_0px_#00000024,0px_0px_15px_0px_#00000024] z-20 animate-move"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale1"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale2"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale3"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale4"></div>
+      </div>
+      <svg className="hidden" xmlns="http://www.w3.org/2000/svg" version="1.1">
+        <defs>
+          <filter id="goo">
+            <feGaussianBlur
+              in="SourceGraphic"
+              stdDeviation="10"
+              result="blur"
+            />
+            <feColorMatrix
+              in="blur"
+              type="matrix"
+              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
+              result="goo"
+            />
+            <feBlend in="SourceGraphic" in2="goo" />
+          </filter>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+export default CameraActivityIndicator;

web/src/components/indicators/Chip.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, useRef } from "react";
+import { CSSTransition } from "react-transition-group";
+
+type ChipProps = {
+  className?: string;
+  children?: ReactNode[];
+  in?: boolean;
+};
+
+export default function Chip({
+  className,
+  children,
+  in: inProp = true,
+}: ChipProps) {
+  const nodeRef = useRef(null);
+
+  return (
+    <CSSTransition
+      in={inProp}
+      nodeRef={nodeRef}
+      timeout={500}
+      classNames={{
+        enter: "opacity-0",
+        enterActive: "opacity-100 transition-opacity duration-500 ease-in-out",
+        exit: "opacity-100",
+        exitActive: "opacity-0 transition-opacity duration-500 ease-in-out",
+      }}
+      unmountOnExit
+    >
+      <div
+        ref={nodeRef}
+        className={`flex px-2 py-1.5 rounded-2xl items-center z-10 ${className}`}
+      >
+        {children}
+      </div>
+    </CSSTransition>
+  );
+}

web/src/components/indicators/activity-indicator.tsx

@@ -0,0 +1,12 @@
+import { LuLoader2 } from "react-icons/lu";
+
+export default function ActivityIndicator({ size = 30 }) {
+  return (
+    <div
+      className="w-full flex items-center justify-center"
+      aria-label="Loading…"
+    >
+      <LuLoader2 className="animate-spin" size={size} />
+    </div>
+  );
+}