Reduce rerenders in the metadata tab

src/cssStyles.tsx

@@ -171,9 +171,7 @@ type MyOptionType = {
   value: string;
 };
 
-type IsMulti = false;
-
-export function selectFieldStyle(theme: Theme): StylesConfig<MyOptionType, IsMulti> {
+export function selectFieldStyle<IsMulti extends boolean, >(theme: Theme): StylesConfig<MyOptionType, IsMulti> {
   return {
     control: (provided, state) => ({
       ...provided,

src/main/Cutting.tsx

@@ -30,6 +30,7 @@ import { LuHourglass } from "react-icons/lu";
 import { css } from "@emotion/react";
 import VideoPlayers from "./VideoPlayers";
 import VideoControls from "./VideoControls";
+import { fetchMetadata, selectGetStatus as selectMetadataGetStatus } from "../redux/metadataSlice";
 
 const Cutting: React.FC = () => {
 
@@ -45,6 +46,7 @@ const Cutting: React.FC = () => {
   const theme = useTheme();
   const errorReason = useAppSelector((state: { videoState: { errorReason: httpRequestState["errorReason"]; }; }) =>
     state.videoState.errorReason);
+  const metadataGetStatus = useAppSelector(selectMetadataGetStatus);
 
   // Try to fetch URL from external API
   useEffect(() => {
@@ -76,6 +78,13 @@ const Cutting: React.FC = () => {
     }
   }, [videoURLStatus, dispatch, error, t, errorReason, duration]);
 
+  // Already try fetching Metadata to reduce wait time
+  useEffect(() => {
+    if (metadataGetStatus === "idle") {
+      dispatch(fetchMetadata());
+    }
+  }, [metadataGetStatus, dispatch]);
+
   // Style
   const cuttingStyle = css({
     display: "flex",