Refac extract loading indicator into its own component

frontend/src/components/InputConfig.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import LoadingIndicator from './LoadingIndicator';
 
 type InputTextProps = {
   type: 'text' | 'number';
@@ -51,13 +52,7 @@ const InputConfig = ({ type, name, value, setValue, oldValue, updateCallback }:
           </>
         )}
         {oldValue !== null && <button onClick={() => handleUpdate(name, null)}>reset</button>}
-        {loading && (
+        {loading && <LoadingIndicator />}
-          <>
-            <div className="lds-ring" style={{ color: 'var(--accent-font-dark)' }}>
-              <div />
-            </div>
-          </>
-        )}
         {success && <span>✅</span>}
       </div>
     </div>

frontend/src/components/LoadingIndicator.tsx

@@ -0,0 +1,9 @@
+const LoadingIndicator = () => {
+  return (
+    <div className="lds-ring" style={{ color: 'var(--accent-font-dark)' }}>
+      <div />
+    </div>
+  );
+};
+
+export default LoadingIndicator;

frontend/src/components/WatchedCheckBox.tsx

@@ -1,6 +1,7 @@
 import iconUnseen from '/img/icon-unseen.svg';
 import iconSeen from '/img/icon-seen.svg';
 import { useEffect, useState } from 'react';
+import LoadingIndicator from './LoadingIndicator';
 
 type WatchedCheckBoxProps = {
   watched: boolean;
@@ -32,9 +33,7 @@ const WatchedCheckBox = ({ watched, onClick, onDone }: WatchedCheckBoxProps) =>
     <>
       {loading && (
         <>
-          <div className="lds-ring" style={{ color: 'var(--accent-font-dark)' }}>
+          <LoadingIndicator />
-            <div />
-          </div>
         </>
       )}
       {!loading && watched && (

frontend/src/pages/Login.tsx

@@ -5,6 +5,7 @@ import Colours from '../configuration/colours/Colours';
 import Button from '../components/Button';
 import signIn from '../api/actions/signIn';
 import loadAuth from '../api/loader/loadAuth';
+import LoadingIndicator from '../components/LoadingIndicator';
 
 const Login = () => {
   const navigate = useNavigate();
@@ -134,10 +135,7 @@ const Login = () => {
           {waitingForBackend && (
             <>
               <p>
-                Waiting for backend{' '}
+                Waiting for backend <LoadingIndicator />
-                <div className="lds-ring" style={{ color: 'var(--accent-font-dark)' }}>
-                  <div />
-                </div>
               </p>
             </>
           )}