Fix performer image display again and refactoring (#3782)

* Fix the fix for displayed performer image sticking after save
* Refactor for consistency
* Fully extract entity create/update logic from edit pages
* Fix submit hotkeys
* Refactor scene cover preview
* Fix atoi error on new scene page

ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx

@@ -64,6 +64,23 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
 
   const [organizedLoading, setOrganizedLoading] = useState(false);
 
+  async function onSave(input: GQL.GalleryCreateInput) {
+    await updateGallery({
+      variables: {
+        input: {
+          id: gallery.id,
+          ...input,
+        },
+      },
+    });
+    Toast.success({
+      content: intl.formatMessage(
+        { id: "toast.updated_entity" },
+        { entity: intl.formatMessage({ id: "gallery" }).toLocaleLowerCase() }
+      ),
+    });
+  }
+
   const onOrganizedClick = async () => {
     try {
       setOrganizedLoading(true);
@@ -242,6 +259,7 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
             <GalleryEditPanel
               isVisible={activeTabKey === "gallery-edit-panel"}
               gallery={gallery}
+              onSubmit={onSave}
               onDelete={() => setIsDeleteAlertOpen(true)}
             />
           </Tab.Pane>

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx

@@ -1,16 +1,39 @@
 import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useLocation } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
+import * as GQL from "src/core/generated-graphql";
+import { useGalleryCreate } from "src/core/StashService";
+import { useToast } from "src/hooks/Toast";
 import { GalleryEditPanel } from "./GalleryEditPanel";
 
 const GalleryCreate: React.FC = () => {
+  const history = useHistory();
   const intl = useIntl();
+  const Toast = useToast();
+
   const location = useLocation();
   const query = useMemo(() => new URLSearchParams(location.search), [location]);
   const gallery = {
     title: query.get("q") ?? undefined,
   };
 
+  const [createGallery] = useGalleryCreate();
+
+  async function onSave(input: GQL.GalleryCreateInput) {
+    const result = await createGallery({
+      variables: { input },
+    });
+    if (result.data?.galleryCreate) {
+      history.push(`/galleries/${result.data.galleryCreate.id}`);
+      Toast.success({
+        content: intl.formatMessage(
+          { id: "toast.created_entity" },
+          { entity: intl.formatMessage({ id: "gallery" }).toLocaleLowerCase() }
+        ),
+      });
+    }
+  }
+
   return (
     <div className="row new-view">
       <div className="col-md-6">
@@ -20,7 +43,12 @@ const GalleryCreate: React.FC = () => {
             values={{ entityType: intl.formatMessage({ id: "gallery" }) }}
           />
         </h2>
-        <GalleryEditPanel gallery={gallery} isVisible onDelete={() => {}} />
+        <GalleryEditPanel
+          gallery={gallery}
+          isVisible
+          onSubmit={onSave}
+          onDelete={() => {}}
+        />
       </div>
     </div>
   );

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useHistory, Prompt } from "react-router-dom";
+import { Prompt } from "react-router-dom";
 import {
   Button,
   Dropdown,
@@ -15,8 +15,6 @@ import * as yup from "yup";
 import {
   queryScrapeGallery,
   queryScrapeGalleryURL,
-  useGalleryCreate,
-  useGalleryUpdate,
   useListGalleryScrapers,
   mutateReloadScrapers,
 } from "src/core/StashService";
@@ -44,17 +42,18 @@ import { DateInput } from "src/components/Shared/DateInput";
 interface IProps {
   gallery: Partial<GQL.GalleryDataFragment>;
   isVisible: boolean;
+  onSubmit: (input: GQL.GalleryCreateInput) => Promise<void>;
   onDelete: () => void;
 }
 
 export const GalleryEditPanel: React.FC<IProps> = ({
   gallery,
   isVisible,
+  onSubmit,
   onDelete,
 }) => {
   const intl = useIntl();
   const Toast = useToast();
-  const history = useHistory();
   const [scenes, setScenes] = useState<{ id: string; title: string }[]>(
     (gallery?.scenes ?? []).map((s) => ({
       id: s.id,
@@ -74,9 +73,6 @@ export const GalleryEditPanel: React.FC<IProps> = ({
   // Network state
   const [isLoading, setIsLoading] = useState(false);
 
-  const [createGallery] = useGalleryCreate();
-  const [updateGallery] = useGalleryUpdate();
-
   const titleRequired =
     isNew || (gallery?.files?.length === 0 && !gallery?.folder);
 
@@ -151,7 +147,9 @@ export const GalleryEditPanel: React.FC<IProps> = ({
   useEffect(() => {
     if (isVisible) {
       Mousetrap.bind("s s", () => {
-        formik.handleSubmit();
+        if (formik.dirty) {
+          formik.submitForm();
+        }
       });
       Mousetrap.bind("d d", () => {
         onDelete();
@@ -174,51 +172,11 @@ export const GalleryEditPanel: React.FC<IProps> = ({
     setQueryableScrapers(newQueryableScrapers);
   }, [Scrapers]);
 
-  async function onSave(input: GQL.GalleryCreateInput) {
+  async function onSave(input: InputValues) {
     setIsLoading(true);
     try {
-      if (isNew) {
+      await onSubmit(input);
-        const result = await createGallery({
+      formik.resetForm();
-          variables: {
-            input,
-          },
-        });
-        if (result.data?.galleryCreate) {
-          history.push(`/galleries/${result.data.galleryCreate.id}`);
-          Toast.success({
-            content: intl.formatMessage(
-              { id: "toast.created_entity" },
-              {
-                entity: intl
-                  .formatMessage({ id: "gallery" })
-                  .toLocaleLowerCase(),
-              }
-            ),
-          });
-        }
-      } else {
-        const result = await updateGallery({
-          variables: {
-            input: {
-              id: gallery.id!,
-              ...input,
-            },
-          },
-        });
-        if (result.data?.galleryUpdate) {
-          Toast.success({
-            content: intl.formatMessage(
-              { id: "toast.updated_entity" },
-              {
-                entity: intl
-                  .formatMessage({ id: "gallery" })
-                  .toLocaleLowerCase(),
-              }
-            ),
-          });
-          formik.resetForm();
-        }
-      }
     } catch (e) {
       Toast.error(e);
     }

ui/v2.5/src/components/Images/ImageDetails/Image.tsx

@@ -17,6 +17,7 @@ import { Icon } from "src/components/Shared/Icon";
 import { Counter } from "src/components/Shared/Counter";
 import { useToast } from "src/hooks/Toast";
 import * as Mousetrap from "mousetrap";
+import * as GQL from "src/core/generated-graphql";
 import { OCounterButton } from "src/components/Scenes/SceneDetails/OCounterButton";
 import { OrganizedButton } from "src/components/Scenes/SceneDetails/OrganizedButton";
 import { ImageFileInfoPanel } from "./ImageFileInfoPanel";
@@ -51,6 +52,18 @@ export const Image: React.FC = () => {
 
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
 
+  async function onSave(input: GQL.ImageUpdateInput) {
+    await updateImage({
+      variables: { input },
+    });
+    Toast.success({
+      content: intl.formatMessage(
+        { id: "toast.updated_entity" },
+        { entity: intl.formatMessage({ id: "image" }).toLocaleLowerCase() }
+      ),
+    });
+  }
+
   async function onRescan() {
     if (!image || !image.visual_files.length) {
       return;
@@ -225,6 +238,7 @@ export const Image: React.FC = () => {
             <ImageEditPanel
               isVisible={activeTabKey === "image-edit-panel"}
               image={image}
+              onSubmit={onSave}
               onDelete={() => setIsDeleteAlertOpen(true)}
             />
           </Tab.Pane>

ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx

@@ -4,7 +4,6 @@ import { FormattedMessage, useIntl } from "react-intl";
 import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import * as yup from "yup";
-import { useImageUpdate } from "src/core/StashService";
 import {
   PerformerSelect,
   TagSelect,
@@ -25,12 +24,14 @@ import { DateInput } from "src/components/Shared/DateInput";
 interface IProps {
   image: GQL.ImageDataFragment;
   isVisible: boolean;
+  onSubmit: (input: GQL.ImageUpdateInput) => Promise<void>;
   onDelete: () => void;
 }
 
 export const ImageEditPanel: React.FC<IProps> = ({
   image,
   isVisible,
+  onSubmit,
   onDelete,
 }) => {
   const intl = useIntl();
@@ -41,8 +42,6 @@ export const ImageEditPanel: React.FC<IProps> = ({
 
   const { configuration } = React.useContext(ConfigurationContext);
 
-  const [updateImage] = useImageUpdate();
-
   const schema = yup.object({
     title: yup.string().ensure(),
     url: yup.string().ensure(),
@@ -97,7 +96,9 @@ export const ImageEditPanel: React.FC<IProps> = ({
   useEffect(() => {
     if (isVisible) {
       Mousetrap.bind("s s", () => {
-        formik.handleSubmit();
+        if (formik.dirty) {
+          formik.submitForm();
+        }
       });
       Mousetrap.bind("d d", () => {
         onDelete();
@@ -113,23 +114,11 @@ export const ImageEditPanel: React.FC<IProps> = ({
   async function onSave(input: InputValues) {
     setIsLoading(true);
     try {
-      const result = await updateImage({
+      await onSubmit({
-        variables: {
+        id: image.id,
-          input: {
+        ...input,
-            id: image.id,
-            ...input,
-          },
-        },
       });
-      if (result.data?.imageUpdate) {
+      formik.resetForm();
-        Toast.success({
-          content: intl.formatMessage(
-            { id: "toast.updated_entity" },
-            { entity: intl.formatMessage({ id: "image" }).toLocaleLowerCase() }
-          ),
-        });
-        formik.resetForm();
-      }
     } catch (e) {
       Toast.error(e);
     }

ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx

@@ -83,7 +83,7 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
 
   // set up hotkeys
   useEffect(() => {
-    Mousetrap.bind("e", () => setIsEditing(true));
+    Mousetrap.bind("e", () => toggleEditing());
     Mousetrap.bind("d d", () => {
       onDelete();
     });
@@ -95,22 +95,21 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
   });
 
   async function onSave(input: GQL.MovieCreateInput) {
-    try {
+    await updateMovie({
-      const result = await updateMovie({
+      variables: {
-        variables: {
+        input: {
-          input: {
+          id: movie.id,
-            id: movie.id,
+          ...input,
-            ...input,
-          },
         },
-      });
+      },
-      if (result.data?.movieUpdate) {
+    });
-        setIsEditing(false);
+    toggleEditing(false);
-        history.push(`/movies/${result.data.movieUpdate.id}`);
+    Toast.success({
-      }
+      content: intl.formatMessage(
-    } catch (e) {
+        { id: "toast.updated_entity" },
-      Toast.error(e);
+        { entity: intl.formatMessage({ id: "movie" }).toLocaleLowerCase() }
-    }
+      ),
+    });
   }
 
   async function onDelete() {
@@ -124,8 +123,12 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
     history.push(`/movies`);
   }
 
-  function onToggleEdit() {
+  function toggleEditing(value?: boolean) {
-    setIsEditing(!isEditing);
+    if (value !== undefined) {
+      setIsEditing(value);
+    } else {
+      setIsEditing((e) => !e);
+    }
     setFrontImage(undefined);
     setBackImage(undefined);
   }
@@ -239,7 +242,7 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
               objectName={movie.name}
               isNew={false}
               isEditing={isEditing}
-              onToggleEdit={onToggleEdit}
+              onToggleEdit={() => toggleEditing()}
               onSave={() => {}}
               onImageChange={() => {}}
               onDelete={onDelete}
@@ -249,7 +252,7 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
           <MovieEditPanel
             movie={movie}
             onSubmit={onSave}
-            onCancel={onToggleEdit}
+            onCancel={() => toggleEditing()}
             onDelete={onDelete}
             setFrontImage={setFrontImage}
             setBackImage={setBackImage}

ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx

@@ -2,15 +2,17 @@ import React, { useMemo, useState } from "react";
 import * as GQL from "src/core/generated-graphql";
 import { useMovieCreate } from "src/core/StashService";
 import { useHistory, useLocation } from "react-router-dom";
+import { useIntl } from "react-intl";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { useToast } from "src/hooks/Toast";
 import { MovieEditPanel } from "./MovieEditPanel";
 
 const MovieCreate: React.FC = () => {
   const history = useHistory();
-  const location = useLocation();
+  const intl = useIntl();
   const Toast = useToast();
 
+  const location = useLocation();
   const query = useMemo(() => new URLSearchParams(location.search), [location]);
   const movie = {
     name: query.get("q") ?? undefined,
@@ -24,15 +26,17 @@ const MovieCreate: React.FC = () => {
   const [createMovie] = useMovieCreate();
 
   async function onSave(input: GQL.MovieCreateInput) {
-    try {
+    const result = await createMovie({
-      const result = await createMovie({
+      variables: input,
-        variables: input,
+    });
+    if (result.data?.movieCreate?.id) {
+      history.push(`/movies/${result.data.movieCreate.id}`);
+      Toast.success({
+        content: intl.formatMessage(
+          { id: "toast.created_entity" },
+          { entity: intl.formatMessage({ id: "gallery" }).toLocaleLowerCase() }
+        ),
       });
-      if (result.data?.movieCreate?.id) {
-        history.push(`/movies/${result.data.movieCreate.id}`);
-      }
-    } catch (e) {
-      Toast.error(e);
     }
   }
 

ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx

@@ -28,7 +28,7 @@ import { DateInput } from "src/components/Shared/DateInput";
 
 interface IMovieEditPanel {
   movie: Partial<GQL.MovieDataFragment>;
-  onSubmit: (movie: GQL.MovieCreateInput) => void;
+  onSubmit: (movie: GQL.MovieCreateInput) => Promise<void>;
   onCancel: () => void;
   onDelete: () => void;
   setFrontImage: (image?: string | null) => void;
@@ -103,7 +103,7 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
     initialValues,
     enableReinitialize: true,
     validationSchema: schema,
-    onSubmit: (values) => onSubmit(values),
+    onSubmit: (values) => onSave(values),
   });
 
   function setRating(v: number) {
@@ -116,19 +116,17 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
     setRating
   );
 
-  function onCancelEditing() {
-    setFrontImage(undefined);
-    setBackImage(undefined);
-    onCancel?.();
-  }
-
   // set up hotkeys
   useEffect(() => {
     // Mousetrap.bind("u", (e) => {
     //   setStudioFocus()
     //   e.preventDefault();
     // });
-    Mousetrap.bind("s s", () => formik.handleSubmit());
+    Mousetrap.bind("s s", () => {
+      if (formik.dirty) {
+        formik.submitForm();
+      }
+    });
 
     return () => {
       // Mousetrap.unbind("u");
@@ -182,6 +180,17 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
     }
   }
 
+  async function onSave(input: InputValues) {
+    setIsLoading(true);
+    try {
+      await onSubmit(input);
+      formik.resetForm();
+    } catch (e) {
+      Toast.error(e);
+    }
+    setIsLoading(false);
+  }
+
   async function onScrapeMovieURL() {
     const { url } = formik.values;
     if (!url) return;
@@ -488,7 +497,7 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
         objectName={movie?.name ?? intl.formatMessage({ id: "movie" })}
         isNew={isNew}
         isEditing={isEditing}
-        onToggleEdit={onCancelEditing}
+        onToggleEdit={onCancel}
         onSave={formik.handleSubmit}
         saveDisabled={(!isNew && !formik.dirty) || !isEqual(formik.errors, {})}
         onImageChange={onFrontImageChange}

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -68,15 +68,17 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
 
   const activeImage = useMemo(() => {
     const performerImage = performer.image_path;
-    if (image === null && performerImage) {
+    if (isEditing) {
-      const performerImageURL = new URL(performerImage);
+      if (image === null && performerImage) {
-      performerImageURL.searchParams.set("default", "true");
+        const performerImageURL = new URL(performerImage);
-      return performerImageURL.toString();
+        performerImageURL.searchParams.set("default", "true");
-    } else if (image) {
+        return performerImageURL.toString();
-      return image;
+      } else if (image) {
+        return image;
+      }
     }
     return performerImage;
-  }, [image, performer.image_path]);
+  }, [image, isEditing, performer.image_path]);
 
   const lightboxImages = useMemo(
     () => [{ paths: { thumbnail: activeImage, image: activeImage } }],
@@ -122,15 +124,10 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
     setRating
   );
 
-  // reset image if performer changed
-  useEffect(() => {
-    setImage(undefined);
-  }, [performer]);
-
   // set up hotkeys
   useEffect(() => {
     Mousetrap.bind("a", () => setActiveTabKey("details"));
-    Mousetrap.bind("e", () => setIsEditing(!isEditing));
+    Mousetrap.bind("e", () => toggleEditing());
     Mousetrap.bind("c", () => setActiveTabKey("scenes"));
     Mousetrap.bind("g", () => setActiveTabKey("galleries"));
     Mousetrap.bind("m", () => setActiveTabKey("movies"));
@@ -147,6 +144,24 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
     };
   });
 
+  async function onSave(input: GQL.PerformerCreateInput) {
+    await updatePerformer({
+      variables: {
+        input: {
+          id: performer.id,
+          ...input,
+        },
+      },
+    });
+    toggleEditing(false);
+    Toast.success({
+      content: intl.formatMessage(
+        { id: "toast.updated_entity" },
+        { entity: intl.formatMessage({ id: "performer" }).toLocaleLowerCase() }
+      ),
+    });
+  }
+
   async function onDelete() {
     try {
       await deletePerformer({ variables: { id: performer.id } });
@@ -158,6 +173,15 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
     history.push("/performers");
   }
 
+  function toggleEditing(value?: boolean) {
+    if (value !== undefined) {
+      setIsEditing(value);
+    } else {
+      setIsEditing((e) => !e);
+    }
+    setImage(undefined);
+  }
+
   function renderImage() {
     if (activeImage) {
       return (
@@ -175,9 +199,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
             objectName={
               performer?.name ?? intl.formatMessage({ id: "performer" })
             }
-            onToggleEdit={() => {
+            onToggleEdit={() => toggleEditing()}
-              setIsEditing(!isEditing);
-            }}
             onDelete={onDelete}
             onAutoTag={onAutoTag}
             isNew={false}
@@ -297,7 +319,8 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
         <PerformerEditPanel
           performer={performer}
           isVisible={isEditing}
-          onCancel={() => setIsEditing(false)}
+          onSubmit={onSave}
+          onCancel={() => toggleEditing()}
           setImage={setImage}
           setEncodingImage={setEncodingImage}
         />

ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx

@@ -2,9 +2,16 @@ import React, { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { PerformerEditPanel } from "./PerformerEditPanel";
-import { useLocation } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
+import { useToast } from "src/hooks/Toast";
+import * as GQL from "src/core/generated-graphql";
+import { usePerformerCreate } from "src/core/StashService";
 
 const PerformerCreate: React.FC = () => {
+  const Toast = useToast();
+  const history = useHistory();
+  const intl = useIntl();
+
   const [image, setImage] = useState<string | null>();
   const [encodingImage, setEncodingImage] = useState<boolean>(false);
 
@@ -14,7 +21,24 @@ const PerformerCreate: React.FC = () => {
     name: query.get("q") ?? undefined,
   };
 
-  const intl = useIntl();
+  const [createPerformer] = usePerformerCreate();
+
+  async function onSave(input: GQL.PerformerCreateInput) {
+    const result = await createPerformer({
+      variables: { input },
+    });
+    if (result.data?.performerCreate) {
+      history.push(`/performers/${result.data.performerCreate.id}`);
+      Toast.success({
+        content: intl.formatMessage(
+          { id: "toast.created_entity" },
+          {
+            entity: intl.formatMessage({ id: "performer" }).toLocaleLowerCase(),
+          }
+        ),
+      });
+    }
+  }
 
   function renderPerformerImage() {
     if (encodingImage) {
@@ -46,6 +70,7 @@ const PerformerCreate: React.FC = () => {
         <PerformerEditPanel
           performer={performer}
           isVisible
+          onSubmit={onSave}
           setImage={setImage}
           setEncodingImage={setEncodingImage}
         />

ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx

@@ -8,8 +8,6 @@ import {
   useListPerformerScrapers,
   queryScrapePerformer,
   mutateReloadScrapers,
-  usePerformerUpdate,
-  usePerformerCreate,
   useTagCreate,
   queryScrapePerformerURL,
 } from "src/core/StashService";
@@ -24,7 +22,7 @@ import ImageUtils from "src/utils/image";
 import { getStashIDs } from "src/utils/stashIds";
 import { stashboxDisplayName } from "src/utils/stashbox";
 import { useToast } from "src/hooks/Toast";
-import { Prompt, useHistory } from "react-router-dom";
+import { Prompt } from "react-router-dom";
 import { useFormik } from "formik";
 import {
   genderToString,
@@ -57,6 +55,7 @@ const isScraper = (
 interface IPerformerDetails {
   performer: Partial<GQL.PerformerDataFragment>;
   isVisible: boolean;
+  onSubmit: (performer: GQL.PerformerCreateInput) => Promise<void>;
   onCancel?: () => void;
   setImage: (image?: string | null) => void;
   setEncodingImage: (loading: boolean) => void;
@@ -65,12 +64,12 @@ interface IPerformerDetails {
 export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
   performer,
   isVisible,
+  onSubmit,
   onCancel,
   setImage,
   setEncodingImage,
 }) => {
   const Toast = useToast();
-  const history = useHistory();
 
   const isNew = performer.id === undefined;
 
@@ -82,9 +81,6 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
   // Network state
   const [isLoading, setIsLoading] = useState(false);
 
-  const [updatePerformer] = usePerformerUpdate();
-  const [createPerformer] = usePerformerCreate();
-
   const Scrapers = useListPerformerScrapers();
   const [queryableScrapers, setQueryableScrapers] = useState<GQL.Scraper[]>([]);
 
@@ -454,61 +450,35 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
     ImageUtils.onImageChange(event, onImageLoad);
   }
 
+  function valuesToInput(input: InputValues): GQL.PerformerCreateInput {
+    return {
+      ...input,
+      gender: input.gender || null,
+      height_cm: input.height_cm || null,
+      weight: input.weight || null,
+      penis_length: input.penis_length || null,
+      circumcised: input.circumcised || null,
+    };
+  }
+
   async function onSave(input: InputValues) {
     setIsLoading(true);
     try {
-      if (isNew) {
+      await onSubmit(valuesToInput(input));
-        const result = await createPerformer({
+      formik.resetForm();
-          variables: {
-            input: {
-              ...input,
-              gender: input.gender || null,
-              height_cm: input.height_cm || null,
-              weight: input.weight || null,
-              penis_length: input.penis_length || null,
-              circumcised: input.circumcised || null,
-            },
-          },
-        });
-        if (result.data?.performerCreate) {
-          history.push(`/performers/${result.data.performerCreate.id}`);
-        }
-      } else {
-        await updatePerformer({
-          variables: {
-            input: {
-              id: performer.id!,
-              ...input,
-              gender: input.gender || null,
-              height_cm: input.height_cm || null,
-              weight: input.weight || null,
-              penis_length: input.penis_length || null,
-              circumcised: input.circumcised || null,
-            },
-          },
-        });
-      }
     } catch (e) {
       Toast.error(e);
-      setIsLoading(false);
-      return;
-    }
-    if (!isNew && onCancel) {
-      onCancel();
     }
     setIsLoading(false);
   }
 
-  function onCancelEditing() {
-    setImage(undefined);
-    onCancel?.();
-  }
-
   // set up hotkeys
   useEffect(() => {
     if (isVisible) {
       Mousetrap.bind("s s", () => {
-        onSave?.(formik.values);
+        if (formik.dirty) {
+          formik.submitForm();
+        }
       });
 
       return () => {
@@ -699,9 +669,7 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
     }
 
     const currentPerformer = {
-      ...formik.values,
+      ...valuesToInput(formik.values),
-      gender: formik.values.gender || null,
-      circumcised: formik.values.circumcised || null,
       image: formik.values.image ?? performer.image_path,
     };
 
@@ -729,7 +697,7 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
     return (
       <div className={cx("details-edit", "col-xl-9", classNames)}>
         {!isNew && onCancel ? (
-          <Button className="mr-2" variant="primary" onClick={onCancelEditing}>
+          <Button className="mr-2" variant="primary" onClick={onCancel}>
             <FormattedMessage id="actions.cancel" />
           </Button>
         ) : null}

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -169,6 +169,23 @@ const ScenePage: React.FC<IProps> = ({
     };
   });
 
+  async function onSave(input: GQL.SceneCreateInput) {
+    await updateScene({
+      variables: {
+        input: {
+          id: scene.id,
+          ...input,
+        },
+      },
+    });
+    Toast.success({
+      content: intl.formatMessage(
+        { id: "toast.updated_entity" },
+        { entity: intl.formatMessage({ id: "scene" }).toLocaleLowerCase() }
+      ),
+    });
+  }
+
   const onOrganizedClick = async () => {
     try {
       setOrganizedLoading(true);
@@ -461,6 +478,7 @@ const ScenePage: React.FC<IProps> = ({
           <SceneEditPanel
             isVisible={activeTabKey === "scene-edit-panel"}
             scene={scene}
+            onSubmit={onSave}
             onDelete={() => setIsDeleteAlertOpen(true)}
           />
         </Tab.Pane>

ui/v2.5/src/components/Scenes/SceneDetails/SceneCreate.tsx

@@ -1,19 +1,23 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useLocation } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { SceneEditPanel } from "./SceneEditPanel";
-import { useFindScene } from "src/core/StashService";
+import * as GQL from "src/core/generated-graphql";
+import { mutateCreateScene, useFindScene } from "src/core/StashService";
 import ImageUtils from "src/utils/image";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
+import { useToast } from "src/hooks/Toast";
 
 const SceneCreate: React.FC = () => {
+  const history = useHistory();
   const intl = useIntl();
+  const Toast = useToast();
 
   const location = useLocation();
   const query = useMemo(() => new URLSearchParams(location.search), [location]);
 
   // create scene from provided scene id if applicable
-  const { data, loading } = useFindScene(query.get("from_scene_id") ?? "");
+  const { data, loading } = useFindScene(query.get("from_scene_id") ?? "new");
   const [loadingCoverImage, setLoadingCoverImage] = useState(false);
   const [coverImage, setCoverImage] = useState<string>();
 
@@ -53,6 +57,23 @@ const SceneCreate: React.FC = () => {
     return <LoadingIndicator />;
   }
 
+  async function onSave(input: GQL.SceneCreateInput) {
+    const fileID = query.get("file_id") ?? undefined;
+    const result = await mutateCreateScene({
+      ...input,
+      file_ids: fileID ? [fileID] : undefined,
+    });
+    if (result.data?.sceneCreate?.id) {
+      history.push(`/scenes/${result.data.sceneCreate.id}`);
+      Toast.success({
+        content: intl.formatMessage(
+          { id: "toast.created_entity" },
+          { entity: intl.formatMessage({ id: "scene" }).toLocaleLowerCase() }
+        ),
+      });
+    }
+  }
+
   return (
     <div className="row new-view justify-content-center" id="create-scene-page">
       <div className="col-md-8">
@@ -64,10 +85,10 @@ const SceneCreate: React.FC = () => {
         </h2>
         <SceneEditPanel
           scene={scene}
-          fileID={query.get("file_id") ?? undefined}
           initialCoverImage={coverImage}
           isVisible
           isNew
+          onSubmit={onSave}
         />
       </div>
     </div>

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -16,10 +16,8 @@ import {
   queryScrapeScene,
   queryScrapeSceneURL,
   useListSceneScrapers,
-  useSceneUpdate,
   mutateReloadScrapers,
   queryScrapeSceneQueryFragment,
-  mutateCreateScene,
 } from "src/core/StashService";
 import {
   PerformerSelect,
@@ -37,7 +35,7 @@ import ImageUtils from "src/utils/image";
 import FormUtils from "src/utils/form";
 import { getStashIDs } from "src/utils/stashIds";
 import { useFormik } from "formik";
-import { Prompt, useHistory } from "react-router-dom";
+import { Prompt } from "react-router-dom";
 import { ConfigurationContext } from "src/hooks/Config";
 import { stashboxDisplayName } from "src/utils/stashbox";
 import { SceneMovieTable } from "./SceneMovieTable";
@@ -59,24 +57,23 @@ const SceneQueryModal = lazyComponent(() => import("./SceneQueryModal"));
 
 interface IProps {
   scene: Partial<GQL.SceneDataFragment>;
-  fileID?: string;
   initialCoverImage?: string;
   isNew?: boolean;
   isVisible: boolean;
+  onSubmit: (input: GQL.SceneCreateInput) => Promise<void>;
   onDelete?: () => void;
 }
 
 export const SceneEditPanel: React.FC<IProps> = ({
   scene,
-  fileID,
   initialCoverImage,
   isNew = false,
   isVisible,
+  onSubmit,
   onDelete,
 }) => {
   const intl = useIntl();
   const Toast = useToast();
-  const history = useHistory();
 
   const [galleries, setGalleries] = useState<{ id: string; title: string }[]>(
     []
@@ -92,14 +89,6 @@ export const SceneEditPanel: React.FC<IProps> = ({
   const [scrapedScene, setScrapedScene] = useState<GQL.ScrapedScene | null>();
   const [endpoint, setEndpoint] = useState<string>();
 
-  const [coverImagePreview, setCoverImagePreview] = useState<string>();
-
-  useEffect(() => {
-    setCoverImagePreview(
-      initialCoverImage ?? scene.paths?.screenshot ?? undefined
-    );
-  }, [scene.paths?.screenshot, initialCoverImage]);
-
   useEffect(() => {
     setGalleries(
       scene.galleries?.map((g) => ({
@@ -114,8 +103,6 @@ export const SceneEditPanel: React.FC<IProps> = ({
   // Network state
   const [isLoading, setIsLoading] = useState(false);
 
-  const [updateScene] = useSceneUpdate();
-
   const schema = yup.object({
     title: yup.string().ensure(),
     code: yup.string().ensure(),
@@ -183,6 +170,19 @@ export const SceneEditPanel: React.FC<IProps> = ({
     onSubmit: (values) => onSave(values),
   });
 
+  const coverImagePreview = useMemo(() => {
+    const sceneImage = scene.paths?.screenshot;
+    const formImage = formik.values.cover_image;
+    if (formImage === null && sceneImage) {
+      const sceneImageURL = new URL(sceneImage);
+      sceneImageURL.searchParams.set("default", "true");
+      return sceneImageURL.toString();
+    } else if (formImage) {
+      return formImage;
+    }
+    return sceneImage;
+  }, [formik.values.cover_image, scene.paths?.screenshot]);
+
   function setRating(v: number) {
     formik.setFieldValue("rating100", v);
   }
@@ -209,7 +209,9 @@ export const SceneEditPanel: React.FC<IProps> = ({
   useEffect(() => {
     if (isVisible) {
       Mousetrap.bind("s s", () => {
-        formik.handleSubmit();
+        if (formik.dirty) {
+          formik.submitForm();
+        }
       });
       Mousetrap.bind("d d", () => {
         if (onDelete) {
@@ -259,35 +261,8 @@ export const SceneEditPanel: React.FC<IProps> = ({
   async function onSave(input: InputValues) {
     setIsLoading(true);
     try {
-      if (!isNew) {
+      await onSubmit(input);
-        const result = await updateScene({
+      formik.resetForm();
-          variables: {
-            input: {
-              id: scene.id!,
-              ...input,
-            },
-          },
-        });
-        if (result.data?.sceneUpdate) {
-          Toast.success({
-            content: intl.formatMessage(
-              { id: "toast.updated_entity" },
-              {
-                entity: intl.formatMessage({ id: "scene" }).toLocaleLowerCase(),
-              }
-            ),
-          });
-          formik.resetForm();
-        }
-      } else {
-        const result = await mutateCreateScene({
-          ...input,
-          file_ids: fileID ? [fileID] : undefined,
-        });
-        if (result.data?.sceneCreate?.id) {
-          history.push(`/scenes/${result.data?.sceneCreate.id}`);
-        }
-      }
     } catch (e) {
       Toast.error(e);
     }
@@ -318,7 +293,6 @@ export const SceneEditPanel: React.FC<IProps> = ({
   const encodingImage = ImageUtils.usePasteImage(onImageLoad);
 
   function onImageLoad(imageData: string) {
-    setCoverImagePreview(imageData);
     formik.setFieldValue("cover_image", imageData);
   }
 
@@ -619,7 +593,6 @@ export const SceneEditPanel: React.FC<IProps> = ({
     if (updatedScene.image) {
       // image is a base64 string
       formik.setFieldValue("cover_image", updatedScene.image);
-      setCoverImagePreview(updatedScene.image);
     }
 
     if (updatedScene.remote_site_id && endpoint) {

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -69,7 +69,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
 
   // set up hotkeys
   useEffect(() => {
-    Mousetrap.bind("e", () => setIsEditing(true));
+    Mousetrap.bind("e", () => toggleEditing());
     Mousetrap.bind("d d", () => {
       onDelete();
     });
@@ -83,21 +83,21 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
   });
 
   async function onSave(input: GQL.StudioCreateInput) {
-    try {
+    await updateStudio({
-      const result = await updateStudio({
+      variables: {
-        variables: {
+        input: {
-          input: {
+          id: studio.id,
-            id: studio.id,
+          ...input,
-            ...input,
-          },
         },
-      });
+      },
-      if (result.data?.studioUpdate) {
+    });
-        setIsEditing(false);
+    toggleEditing(false);
-      }
+    Toast.success({
-    } catch (e) {
+      content: intl.formatMessage(
-      Toast.error(e);
+        { id: "toast.updated_entity" },
-    }
+        { entity: intl.formatMessage({ id: "studio" }).toLocaleLowerCase() }
+      ),
+    });
   }
 
   async function onAutoTag() {
@@ -149,8 +149,13 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
     );
   }
 
-  function onToggleEdit() {
+  function toggleEditing(value?: boolean) {
-    setIsEditing(!isEditing);
+    if (value !== undefined) {
+      setIsEditing(value);
+    } else {
+      setIsEditing((e) => !e);
+    }
+    setImage(undefined);
   }
 
   function renderImage() {
@@ -213,7 +218,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
               objectName={studio.name ?? intl.formatMessage({ id: "studio" })}
               isNew={false}
               isEditing={isEditing}
-              onToggleEdit={onToggleEdit}
+              onToggleEdit={() => toggleEditing()}
               onSave={() => {}}
               onImageChange={() => {}}
               onClearImage={() => {}}
@@ -225,7 +230,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
           <StudioEditPanel
             studio={studio}
             onSubmit={onSave}
-            onCancel={onToggleEdit}
+            onCancel={() => toggleEditing()}
             onDelete={onDelete}
             setImage={setImage}
             setEncodingImage={setEncodingImage}

ui/v2.5/src/components/Studios/StudioDetails/StudioCreate.tsx

@@ -27,15 +27,17 @@ const StudioCreate: React.FC = () => {
   const [createStudio] = useStudioCreate();
 
   async function onSave(input: GQL.StudioCreateInput) {
-    try {
+    const result = await createStudio({
-      const result = await createStudio({
+      variables: { input },
-        variables: { input },
+    });
+    if (result.data?.studioCreate?.id) {
+      history.push(`/studios/${result.data.studioCreate.id}`);
+      Toast.success({
+        content: intl.formatMessage(
+          { id: "toast.created_entity" },
+          { entity: intl.formatMessage({ id: "studio" }).toLocaleLowerCase() }
+        ),
       });
-      if (result.data?.studioCreate?.id) {
-        history.push(`/studios/${result.data.studioCreate.id}`);
-      }
-    } catch (e) {
-      Toast.error(e);
     }
   }
 

ui/v2.5/src/components/Studios/StudioDetails/StudioEditPanel.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import * as yup from "yup";
 import Mousetrap from "mousetrap";
 import { Icon } from "src/components/Shared/Icon";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { StudioSelect } from "src/components/Shared/Select";
 import { DetailsEditNavbar } from "src/components/Shared/DetailsEditNavbar";
 import { Button, Form, Col, Row } from "react-bootstrap";
@@ -18,10 +19,11 @@ import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { useRatingKeybinds } from "src/hooks/keybinds";
 import { ConfigurationContext } from "src/hooks/Config";
 import isEqual from "lodash-es/isEqual";
+import { useToast } from "src/hooks/Toast";
 
 interface IStudioEditPanel {
   studio: Partial<GQL.StudioDataFragment>;
-  onSubmit: (studio: GQL.StudioCreateInput) => void;
+  onSubmit: (studio: GQL.StudioCreateInput) => Promise<void>;
   onCancel: () => void;
   onDelete: () => void;
   setImage: (image?: string | null) => void;
@@ -37,10 +39,14 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
   setEncodingImage,
 }) => {
   const intl = useIntl();
+  const Toast = useToast();
 
   const isNew = studio.id === undefined;
   const { configuration } = React.useContext(ConfigurationContext);
 
+  // Network state
+  const [isLoading, setIsLoading] = useState(false);
+
   const schema = yup.object({
     name: yup.string().required(),
     url: yup.string().ensure(),
@@ -73,6 +79,7 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
   });
 
   const initialValues = {
+    id: studio.id,
     name: studio.name ?? "",
     url: studio.url ?? "",
     details: studio.details ?? "",
@@ -89,7 +96,7 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
     initialValues,
     enableReinitialize: true,
     validationSchema: schema,
-    onSubmit: (values) => onSubmit(values),
+    onSubmit: (values) => onSave(values),
   });
 
   const encodingImage = ImageUtils.usePasteImage((imageData) =>
@@ -114,20 +121,30 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
     setRating
   );
 
-  function onCancelEditing() {
-    setImage(undefined);
-    onCancel?.();
-  }
-
   // set up hotkeys
   useEffect(() => {
-    Mousetrap.bind("s s", () => formik.handleSubmit());
+    Mousetrap.bind("s s", () => {
+      if (formik.dirty) {
+        formik.submitForm();
+      }
+    });
 
     return () => {
       Mousetrap.unbind("s s");
     };
   });
 
+  async function onSave(input: InputValues) {
+    setIsLoading(true);
+    try {
+      await onSubmit(input);
+      formik.resetForm();
+    } catch (e) {
+      Toast.error(e);
+    }
+    setIsLoading(false);
+  }
+
   function onImageLoad(imageData: string | null) {
     formik.setFieldValue("image", imageData);
   }
@@ -200,6 +217,8 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
     : undefined;
   const aliasErrorIdx = aliasErrors?.split(" ").map((e) => parseInt(e));
 
+  if (isLoading) return <LoadingIndicator />;
+
   return (
     <>
       <Prompt
@@ -331,7 +350,7 @@ export const StudioEditPanel: React.FC<IStudioEditPanel> = ({
         objectName={studio?.name ?? intl.formatMessage({ id: "studio" })}
         isNew={isNew}
         isEditing
-        onToggleEdit={onCancelEditing}
+        onToggleEdit={onCancel}
         onSave={formik.handleSubmit}
         saveDisabled={(!isNew && !formik.dirty) || !isEqual(formik.errors, {})}
         onImageChange={onImageChange}

ui/v2.5/src/components/Tags/TagDetails/Tag.tsx

@@ -88,7 +88,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
 
   // set up hotkeys
   useEffect(() => {
-    Mousetrap.bind("e", () => setIsEditing(true));
+    Mousetrap.bind("e", () => toggleEditing());
     Mousetrap.bind("d d", () => {
       onDelete();
     });
@@ -106,30 +106,31 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
   });
 
   async function onSave(input: GQL.TagCreateInput) {
-    try {
+    const oldRelations = {
-      const oldRelations = {
+      parents: tag.parents ?? [],
-        parents: tag.parents ?? [],
+      children: tag.children ?? [],
-        children: tag.children ?? [],
+    };
-      };
+    const result = await updateTag({
-      const result = await updateTag({
+      variables: {
-        variables: {
+        input: {
-          input: {
+          id: tag.id,
-            id: tag.id,
+          ...input,
-            ...input,
-          },
         },
+      },
+    });
+    if (result.data?.tagUpdate) {
+      toggleEditing(false);
+      const updated = result.data.tagUpdate;
+      tagRelationHook(updated, oldRelations, {
+        parents: updated.parents,
+        children: updated.children,
+      });
+      Toast.success({
+        content: intl.formatMessage(
+          { id: "toast.updated_entity" },
+          { entity: intl.formatMessage({ id: "tag" }).toLocaleLowerCase() }
+        ),
       });
-      if (result.data?.tagUpdate) {
-        setIsEditing(false);
-        const updated = result.data.tagUpdate;
-        tagRelationHook(updated, oldRelations, {
-          parents: updated.parents,
-          children: updated.children,
-        });
-        return updated.id;
-      }
-    } catch (e) {
-      Toast.error(e);
     }
   }
 
@@ -190,8 +191,12 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
     );
   }
 
-  function onToggleEdit() {
+  function toggleEditing(value?: boolean) {
-    setIsEditing(!isEditing);
+    if (value !== undefined) {
+      setIsEditing(value);
+    } else {
+      setIsEditing((e) => !e);
+    }
     setImage(undefined);
   }
 
@@ -283,7 +288,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
                 objectName={tag.name}
                 isNew={false}
                 isEditing={isEditing}
-                onToggleEdit={onToggleEdit}
+                onToggleEdit={() => toggleEditing()}
                 onSave={() => {}}
                 onImageChange={() => {}}
                 onClearImage={() => {}}
@@ -297,7 +302,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
             <TagEditPanel
               tag={tag}
               onSubmit={onSave}
-              onCancel={onToggleEdit}
+              onCancel={() => toggleEditing()}
               onDelete={onDelete}
               setImage={setImage}
               setEncodingImage={setEncodingImage}

ui/v2.5/src/components/Tags/TagDetails/TagCreate.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
-
+import { useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { useTagCreate } from "src/core/StashService";
 import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
@@ -9,10 +9,11 @@ import { tagRelationHook } from "src/core/tags";
 import { TagEditPanel } from "./TagEditPanel";
 
 const TagCreate: React.FC = () => {
+  const intl = useIntl();
   const history = useHistory();
-  const location = useLocation();
   const Toast = useToast();
 
+  const location = useLocation();
   const query = useMemo(() => new URLSearchParams(location.search), [location]);
   const tag = {
     name: query.get("q") ?? undefined,
@@ -25,24 +26,26 @@ const TagCreate: React.FC = () => {
   const [createTag] = useTagCreate();
 
   async function onSave(input: GQL.TagCreateInput) {
-    try {
+    const oldRelations = {
-      const oldRelations = {
+      parents: [],
-        parents: [],
+      children: [],
-        children: [],
+    };
-      };
+    const result = await createTag({
-      const result = await createTag({
+      variables: { input },
-        variables: { input },
+    });
+    if (result.data?.tagCreate?.id) {
+      const created = result.data.tagCreate;
+      tagRelationHook(created, oldRelations, {
+        parents: created.parents,
+        children: created.children,
+      });
+      history.push(`/tags/${created.id}`);
+      Toast.success({
+        content: intl.formatMessage(
+          { id: "toast.created_entity" },
+          { entity: intl.formatMessage({ id: "tag" }).toLocaleLowerCase() }
+        ),
       });
-      if (result.data?.tagCreate?.id) {
-        const created = result.data.tagCreate;
-        tagRelationHook(created, oldRelations, {
-          parents: created.parents,
-          children: created.children,
-        });
-        history.push(`/tags/${result.data.tagCreate.id}`);
-      }
-    } catch (e) {
-      Toast.error(e);
     }
   }
 

ui/v2.5/src/components/Tags/TagDetails/TagEditPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import * as yup from "yup";
@@ -10,13 +10,14 @@ import ImageUtils from "src/utils/image";
 import { useFormik } from "formik";
 import { Prompt } from "react-router-dom";
 import Mousetrap from "mousetrap";
+import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { StringListInput } from "src/components/Shared/StringListInput";
 import isEqual from "lodash-es/isEqual";
+import { useToast } from "src/hooks/Toast";
 
 interface ITagEditPanel {
   tag: Partial<GQL.TagDataFragment>;
-  // returns id
+  onSubmit: (tag: GQL.TagCreateInput) => Promise<void>;
-  onSubmit: (tag: GQL.TagCreateInput) => void;
   onCancel: () => void;
   onDelete: () => void;
   setImage: (image?: string | null) => void;
@@ -32,9 +33,13 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
   setEncodingImage,
 }) => {
   const intl = useIntl();
+  const Toast = useToast();
 
   const isNew = tag.id === undefined;
 
+  // Network state
+  const [isLoading, setIsLoading] = useState(false);
+
   const labelXS = 3;
   const labelXL = 3;
   const fieldXS = 9;
@@ -84,23 +89,33 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
     initialValues,
     validationSchema: schema,
     enableReinitialize: true,
-    onSubmit: (values) => onSubmit(values),
+    onSubmit: (values) => onSave(values),
   });
 
-  function onCancelEditing() {
-    setImage(undefined);
-    onCancel?.();
-  }
-
   // set up hotkeys
   useEffect(() => {
-    Mousetrap.bind("s s", () => formik.handleSubmit());
+    Mousetrap.bind("s s", () => {
+      if (formik.dirty) {
+        formik.submitForm();
+      }
+    });
 
     return () => {
       Mousetrap.unbind("s s");
     };
   });
 
+  async function onSave(input: InputValues) {
+    setIsLoading(true);
+    try {
+      await onSubmit(input);
+      formik.resetForm();
+    } catch (e) {
+      Toast.error(e);
+    }
+    setIsLoading(false);
+  }
+
   const encodingImage = ImageUtils.usePasteImage(onImageLoad);
 
   useEffect(() => {
@@ -127,6 +142,8 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
     : undefined;
   const aliasErrorIdx = aliasErrors?.split(" ").map((e) => parseInt(e));
 
+  if (isLoading) return <LoadingIndicator />;
+
   const isEditing = true;
 
   // TODO: CSS class
@@ -275,7 +292,7 @@ export const TagEditPanel: React.FC<ITagEditPanel> = ({
         objectName={tag?.name ?? intl.formatMessage({ id: "tag" })}
         isNew={isNew}
         isEditing={isEditing}
-        onToggleEdit={onCancelEditing}
+        onToggleEdit={onCancel}
         onSave={formik.handleSubmit}
         saveDisabled={(!isNew && !formik.dirty) || !isEqual(formik.errors, {})}
         onImageChange={onImageChange}

ui/v2.5/src/core/StashService.ts

@@ -222,8 +222,10 @@ export const useFindGallery = (id: string) => {
   const skip = id === "new";
   return GQL.useFindGalleryQuery({ variables: { id }, skip });
 };
-export const useFindScene = (id: string) =>
+export const useFindScene = (id: string) => {
-  GQL.useFindSceneQuery({ variables: { id } });
+  const skip = id === "new";
+  return GQL.useFindSceneQuery({ variables: { id }, skip });
+};
 export const useSceneStreams = (id: string) =>
   GQL.useSceneStreamsQuery({ variables: { id } });