Replace our spinner with appkits spinner

This changes is so we use the spinner component
from appkit instead of animating an icon ourselves.

src/cssStyles.tsx

@@ -1,7 +1,7 @@
 /**
  * This file contains general css stylings
  */
-import { css, Global, keyframes } from "@emotion/react";
+import { css, Global } from "@emotion/react";
 import React from "react";
 import emotionNormalize from "emotion-normalize";
 import { createTheme } from "@mui/material/styles";
@@ -399,13 +399,6 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
   },
 });
 
-export const spinningStyle = css({
-  animation: `2s linear infinite none ${keyframes({
-    "0%": { transform: "rotate(0)" },
-    "100%": { transform: "rotate(360deg)" },
-  })}`,
-});
-
 export const customIconStyle = css(({
   maxWidth: "16px",
   height: "auto",

src/main/Save.tsx

@@ -3,10 +3,10 @@ import React, { useEffect, useState } from "react";
 import { css } from "@emotion/react";
 import {
   basicButtonStyle, backOrContinueStyle, ariaLive, errorBoxStyle,
-  navigationButtonStyle, spinningStyle,
+  navigationButtonStyle,
 } from "../cssStyles";
 
-import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck } from "react-icons/lu";
+import { LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck } from "react-icons/lu";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import { selectFinishState } from "../redux/finishSlice";
@@ -32,6 +32,7 @@ import {
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
+import { Spinner } from "@opencast/appkit";
 
 /**
  * Shown if the user wishes to save.
@@ -124,22 +125,20 @@ export const SaveButton: React.FC = () => {
   const [metadataSaveStarted, setMetadataSaveStarted] = useState(false);
 
   // Update based on current fetching status
-  let Icon = LuSave;
-  let spin = false;
   let tooltip = null;
-  if (workflowStatus === "failed" || metadataStatus === "failed") {
-    Icon = LuAlertCircle;
-    spin = false;
-    tooltip = t("save.confirmButton-failed-tooltip");
-  } else if (workflowStatus === "success" && metadataStatus === "success") {
-    Icon = LuCheck;
-    spin = false;
-    tooltip = t("save.confirmButton-success-tooltip");
-  } else if (workflowStatus === "loading" || metadataStatus === "loading") {
-    Icon = LuLoader;
-    spin = true;
-    tooltip = t("save.confirmButton-attempting-tooltip");
-  }
+  const Icon = () => {
+    if (workflowStatus === "failed" || metadataStatus === "failed") {
+      tooltip = t("save.confirmButton-failed-tooltip");
+      return <LuAlertCircle />;
+    } else if (workflowStatus === "success" && metadataStatus === "success") {
+      tooltip = t("save.confirmButton-success-tooltip");
+      return <LuCheck />;
+    } else if (workflowStatus === "loading" || metadataStatus === "loading") {
+      tooltip = t("save.confirmButton-attempting-tooltip");
+      return <Spinner />;
+    }
+    <LuSave />;
+  };
 
   const ariaSaveUpdate = () => {
     if (workflowStatus === "success") {
@@ -201,7 +200,7 @@ export const SaveButton: React.FC = () => {
             save();
           }
         }}>
-        <Icon css={spin ? spinningStyle : undefined} />
+        {Icon()}
         <span>{t("save.confirm-button")}</span>
         <div css={ariaLive} aria-live="polite" aria-atomic="true">{ariaSaveUpdate()}</div>
       </div>

src/main/Timeline.tsx

@@ -18,7 +18,7 @@ import {
   moveCut,
 } from "../redux/videoSlice";
 
-import { LuMenu, LuLoader } from "react-icons/lu";
+import { LuMenu } from "react-icons/lu";
 
 import useResizeObserver from "use-resize-observer";
 
@@ -34,7 +34,7 @@ import { ThemedTooltip } from "./Tooltip";
 import ScrollContainer from "react-indiana-drag-scroll";
 import CuttingActionsContextMenu from "./CuttingActionsContextMenu";
 import { useHotkeys } from "react-hotkeys-hook";
-import { spinningStyle } from "../cssStyles";
+import { Spinner } from "@opencast/appkit";
 
 /**
  * A container for visualizing the cutting of the video, as well as for controlling
@@ -664,7 +664,7 @@ export const Waveforms: React.FC<{ timelineHeight: number; }> = ({ timelineHeigh
     } else {
       return (
         <>
-          <LuLoader css={[spinningStyle, { fontSize: 40 }]} />
+          <Spinner size={40} />
           <div>{t("timeline.generateWaveform-text")}</div>
         </>
       );

src/main/WorkflowConfiguration.tsx

@@ -5,10 +5,9 @@ import {
   basicButtonStyle,
   backOrContinueStyle,
   errorBoxStyle,
-  spinningStyle,
 } from "../cssStyles";
 
-import { LuLoader, LuCheck, LuAlertCircle, LuChevronLeft, LuDatabase, LuMoreHorizontal } from "react-icons/lu";
+import { LuCheck, LuAlertCircle, LuChevronLeft, LuDatabase, LuMoreHorizontal } from "react-icons/lu";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
@@ -35,6 +34,7 @@ import {
 } from "../redux/subtitleSlice";
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
+import { Spinner } from "@opencast/appkit";
 
 /**
  * Will eventually display settings based on the selected workflow index
@@ -147,19 +147,16 @@ export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {
   }, [metadataStatus]);
 
   // Update based on current fetching status
-  let Icon = LuDatabase;
-  let spin = false;
-  if (workflowStatus === "failed" || metadataStatus === "failed") {
-    Icon = LuAlertCircle;
-    spin = false;
-  } else if (workflowStatus === "success" && metadataStatus === "success") {
-    Icon = LuCheck;
-    spin = false;
-  } else if (workflowStatus === "loading" || metadataStatus === "loading") {
-    Icon = LuLoader;
-    spin = true;
-
-  }
+  const Icon = () => {
+    if (workflowStatus === "failed" || metadataStatus === "failed") {
+      return <LuAlertCircle />;
+    } else if (workflowStatus === "success" && metadataStatus === "success") {
+      return <LuCheck />;
+    } else if (workflowStatus === "loading" || metadataStatus === "loading") {
+      return <Spinner />;
+    }
+    return <LuDatabase />;
+  };
 
   const saveButtonStyle = css({
     padding: "16px",
@@ -176,7 +173,7 @@ export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {
           saveAndProcess();
         }
       }}>
-      <Icon css={spin ? spinningStyle : undefined} />
+      {Icon()}
       <span>{text}</span>
     </div>
   );