- address https://github.com/owncast/owncast/issues/780 to stop showing 'loading' on OK button when error is returned (applies for video variant modal and social icon modal)

- just use pre-exisiting const to render cpu table item

web/components/config/edit-social-links.tsx

@@ -3,7 +3,7 @@ import { Typography, Table, Button, Modal, Input } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { DeleteOutlined } from '@ant-design/icons';
 import SocialDropdown from './social-icons-dropdown';
-import { fetchData, NEXT_PUBLIC_API_HOST, SOCIAL_PLATFORMS_LIST } from '../../utils/apis';
+import { fetchData, SOCIAL_PLATFORMS_LIST } from '../../utils/apis';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
   API_SOCIAL_HANDLES,
@@ -138,6 +138,7 @@ export default function EditSocialLinks() {
       },
       onError: (message: string) => {
         setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
+        setModalProcessing(false);
         resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
       },
     });
@@ -192,28 +193,26 @@ export default function EditSocialLinks() {
       title: '',
       dataIndex: '',
       key: 'edit',
-      render: (data, record, index) => {
-        return (
-          <div className="actions">
-            <Button
-              size="small"
-              onClick={() => {
-                setEditId(index);
-                setModalDataState({ ...currentSocialHandles[index] });
-                setDisplayModal(true);
-              }}
-            >
-              Edit
-            </Button>
-            <Button
-              className="delete-button"
-              icon={<DeleteOutlined />}
-              size="small"
-              onClick={() => handleDeleteItem(index)}
-            />
-          </div>
-        );
-      },
+      render: (data, record, index) => (
+        <div className="actions">
+          <Button
+            size="small"
+            onClick={() => {
+              setEditId(index);
+              setModalDataState({ ...currentSocialHandles[index] });
+              setDisplayModal(true);
+            }}
+          >
+            Edit
+          </Button>
+          <Button
+            className="delete-button"
+            icon={<DeleteOutlined />}
+            size="small"
+            onClick={() => handleDeleteItem(index)}
+          />
+        </div>
+      ),
     },
   ];
 

web/components/config/video-variants-table.tsx

@@ -14,6 +14,7 @@ import {
   DEFAULT_VARIANT_STATE,
   RESET_TIMEOUT,
   postConfigUpdateToAPI,
+  ENCODER_PRESET_TOOLTIPS,
 } from '../../utils/config-constants';
 import {
   createInputStatus,
@@ -26,14 +27,6 @@ import FormStatusIndicator from './form-status-indicator';
 
 const { Title } = Typography;
 
-const CPU_USAGE_LEVEL_MAP = {
-  1: 'lowest',
-  2: 'low',
-  3: 'medium',
-  4: 'high',
-  5: 'highest',
-};
-
 export default function CurrentVariantsTable() {
   const [displayModal, setDisplayModal] = useState(false);
   const [modalProcessing, setModalProcessing] = useState(false);
@@ -97,6 +90,7 @@ export default function CurrentVariantsTable() {
       },
       onError: (message: string) => {
         setSubmitStatus(createInputStatus(STATUS_ERROR, message));
+        setModalProcessing(false);
         resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
       },
     });
@@ -144,7 +138,7 @@ export default function CurrentVariantsTable() {
       dataIndex: 'cpuUsageLevel',
       key: 'cpuUsageLevel',
       render: (level: string, variant: VideoVariant) =>
-        !level || variant.videoPassthrough ? 'n/a' : CPU_USAGE_LEVEL_MAP[level],
+        !level || variant.videoPassthrough ? 'n/a' : ENCODER_PRESET_TOOLTIPS[level].split(' ')[0],
     },
     {
       title: '',