Replace our spinner with appkits spinner

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";
@@ -405,13 +405,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 } 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 {
@@ -32,8 +32,8 @@ import {
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
+import { Spinner } from "@opencast/appkit";
 import { ProtoButton } from "@opencast/appkit";
-import { IconType } from "react-icons";
 import { setEnd } from "../redux/endSlice";
 
 /**
@@ -102,11 +102,9 @@ const Save: React.FC = () => {
  * Button that sends a post request to save current changes
  */
 export const SaveButton: React.FC<{
-  basicIcon?: IconType
   text?: string
   isTransitionToEnd?: boolean
 }> = ({
-  basicIcon = LuSave,
   text,
   isTransitionToEnd = false,
 }) => {
@@ -123,22 +121,20 @@ export const SaveButton: React.FC<{
   const theme = useTheme();
 
   // Update based on current fetching status
-  let Icon = basicIcon;
-  let spin = false;
   let tooltip = null;
-  if (workflowStatus === "failed") {
-    Icon = LuAlertCircle;
-    spin = false;
-    tooltip = t("save.confirmButton-failed-tooltip");
-  } else if (workflowStatus === "success") {
-    Icon = LuCheck;
-    spin = false;
-    tooltip = t("save.confirmButton-success-tooltip");
-  } else if (workflowStatus === "loading") {
-    Icon = LuLoader;
-    spin = true;
-    tooltip = t("save.confirmButton-attempting-tooltip");
-  }
+  const Icon = () => {
+    if (workflowStatus === "failed") {
+      tooltip = t("save.confirmButton-failed-tooltip");
+      return <LuAlertCircle />;
+    } else if (workflowStatus === "success") {
+      tooltip = t("save.confirmButton-success-tooltip");
+      return <LuCheck />;
+    } else if (workflowStatus === "loading") {
+      tooltip = t("save.confirmButton-attempting-tooltip");
+      return <Spinner />;
+    }
+    <LuSave />;
+  };
 
   const ariaSaveUpdate = () => {
     if (workflowStatus === "success") {
@@ -181,7 +177,7 @@ export const SaveButton: React.FC<{
         onClick={save}
         css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
       >
-        <Icon css={spin ? spinningStyle : undefined} />
+        {Icon()}
         <span>{text ?? t("save.confirm-button")}</span>
         <div css={ariaLive} aria-live="polite" aria-atomic="true">{ariaSaveUpdate()}</div>
       </ProtoButton>

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

@@ -6,7 +6,7 @@ import {
   errorBoxStyle,
 } from "../cssStyles";
 
-import { LuChevronLeft, LuDatabase, LuMoreHorizontal } from "react-icons/lu";
+import { LuChevronLeft, LuMoreHorizontal } from "react-icons/lu";
 
 import { useAppSelector } from "../redux/store";
 
@@ -45,7 +45,6 @@ const WorkflowConfiguration: React.FC = () => {
       <div css={backOrContinueStyle}>
         <PageButton pageNumber={1} label={t("various.goBack-button")} Icon={LuChevronLeft} />
         <SaveButton
-          basicIcon={LuDatabase}
           isTransitionToEnd={true}
           text={t("workflowConfig.confirm-button")}
         />