React code splitting (#2603)

* Code split using react lazy
* Split locales
* Move to lodash-es
* Import individual icons

ui/v2.5/src/components/Dialogs/GenerateDialog.tsx

@@ -10,6 +10,7 @@ import { Manual } from "../Help/Manual";
 import { withoutTypename } from "src/utils";
 import { GenerateOptions } from "../Settings/Tasks/GenerateOptions";
 import { SettingSection } from "../Settings/SettingSection";
+import { faCogs, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 
 interface ISceneGenerateDialog {
   selectedIds?: string[];
@@ -171,7 +172,7 @@ export const GenerateDialog: React.FC<ISceneGenerateDialog> = ({
     <Modal
       show
       modalProps={{ animation, size: "lg" }}
-      icon="cogs"
+      icon={faCogs}
       header={intl.formatMessage({ id: "actions.generate" })}
       accept={{
         onClick: onGenerate,
@@ -188,7 +189,7 @@ export const GenerateDialog: React.FC<ISceneGenerateDialog> = ({
           className="minimal help-button"
           onClick={() => onShowManual()}
         >
-          <Icon icon="question-circle" />
+          <Icon icon={faQuestionCircle} />
         </Button>
       }
     >
@@ -205,3 +206,5 @@ export const GenerateDialog: React.FC<ISceneGenerateDialog> = ({
     </Modal>
   );
 };
+
+export default GenerateDialog;

ui/v2.5/src/components/Dialogs/IdentifyDialog/FieldOptions.tsx

@@ -5,6 +5,11 @@ import * as GQL from "src/core/generated-graphql";
 import { FormattedMessage, useIntl } from "react-intl";
 import { multiValueSceneFields, SceneField, sceneFields } from "./constants";
 import { ThreeStateBoolean } from "./ThreeStateBoolean";
+import {
+  faCheck,
+  faPencilAlt,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";
 
 interface IFieldOptionsEditor {
   options: GQL.IdentifyFieldOptions | undefined;
@@ -148,10 +153,10 @@ const FieldOptionsEditor: React.FC<IFieldOptionsEditor> = ({
           return intl.formatMessage({ id: "actions.use_default" });
         }
         if (value) {
-          return <Icon icon="check" className="text-success" />;
+          return <Icon icon={faCheck} className="text-success" />;
         }
 
-        return <Icon icon="times" className="text-danger" />;
+        return <Icon icon={faTimes} className="text-danger" />;
       }
 
       const defaultVal = defaultOptions?.fieldOptions?.find(
@@ -212,7 +217,7 @@ const FieldOptionsEditor: React.FC<IFieldOptionsEditor> = ({
               className="minimal text-success"
               onClick={() => onEditOptions()}
             >
-              <Icon icon="check" />
+              <Icon icon={faCheck} />
             </Button>
             <Button
               className="minimal text-danger"
@@ -221,13 +226,13 @@ const FieldOptionsEditor: React.FC<IFieldOptionsEditor> = ({
                 resetOptions();
               }}
             >
-              <Icon icon="times" />
+              <Icon icon={faTimes} />
             </Button>
           </>
         ) : (
           <>
             <Button className="minimal" onClick={() => editField()}>
-              <Icon icon="pencil-alt" />
+              <Icon icon={faPencilAlt} />
             </Button>
           </>
         )}

ui/v2.5/src/components/Dialogs/IdentifyDialog/IdentifyDialog.tsx

@@ -20,6 +20,11 @@ import { Manual } from "src/components/Help/Manual";
 import { IScraperSource } from "./constants";
 import { OptionsEditor } from "./Options";
 import { SourcesEditor, SourcesList } from "./Sources";
+import {
+  faCogs,
+  faFolderOpen,
+  faQuestionCircle,
+} from "@fortawesome/free-solid-svg-icons";
 
 const autoTagScraperID = "builtin_autotag";
 
@@ -167,7 +172,7 @@ export const IdentifyDialog: React.FC<IIdentifyDialogProps> = ({
               title={intl.formatMessage({ id: "actions.select_folders" })}
               onClick={() => onClick()}
             >
-              <Icon icon="folder-open" />
+              <Icon icon={faFolderOpen} />
             </Button>
           </div>
         </div>
@@ -403,7 +408,7 @@ export const IdentifyDialog: React.FC<IIdentifyDialogProps> = ({
     <Modal
       modalProps={{ animation, size: "lg" }}
       show
-      icon="cogs"
+      icon={faCogs}
       header={intl.formatMessage({ id: "actions.identify" })}
       accept={{
         onClick: onIdentify,
@@ -430,7 +435,7 @@ export const IdentifyDialog: React.FC<IIdentifyDialogProps> = ({
           className="minimal help-button"
           onClick={() => onShowManual()}
         >
-          <Icon icon="question-circle" />
+          <Icon icon={faQuestionCircle} />
         </Button>
       }
     >

ui/v2.5/src/components/Dialogs/IdentifyDialog/Sources.tsx

@@ -5,6 +5,13 @@ import { FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { IScraperSource } from "./constants";
 import { OptionsEditor } from "./Options";
+import {
+  faCog,
+  faGripVertical,
+  faMinus,
+  faPencilAlt,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 
 interface ISourceEditor {
   isNew: boolean;
@@ -50,7 +57,7 @@ export const SourcesEditor: React.FC<ISourceEditor> = ({
       dialogClassName="identify-source-editor"
       modalProps={{ animation: false, size: "lg" }}
       show
-      icon={isNew ? "plus" : "pencil-alt"}
+      icon={isNew ? faPlus : faPencilAlt}
       header={intl.formatMessage(
         { id: headerMsgId },
         {
@@ -184,19 +191,19 @@ export const SourcesList: React.FC<ISourcesList> = ({
                 onMouseEnter={() => setMouseOverIndex(index)}
                 onMouseLeave={() => setMouseOverIndex(undefined)}
               >
-                <Icon icon="grip-vertical" />
+                <Icon icon={faGripVertical} />
               </div>
               {s.displayName}
             </div>
             <div>
               <Button className="minimal" onClick={() => editSource(s)}>
-                <Icon icon="cog" />
+                <Icon icon={faCog} />
               </Button>
               <Button
                 className="minimal text-danger"
                 onClick={() => removeSource(index)}
               >
-                <Icon icon="minus" />
+                <Icon icon={faMinus} />
               </Button>
             </div>
           </ListGroup.Item>
@@ -208,7 +215,7 @@ export const SourcesList: React.FC<ISourcesList> = ({
             className="minimal add-scraper-source-button"
             onClick={() => editSource()}
           >
-            <Icon icon="plus" />
+            <Icon icon={faPlus} />
           </Button>
         </div>
       )}

ui/v2.5/src/components/Dialogs/SubmitDraft.tsx

@@ -5,6 +5,7 @@ import * as GQL from "src/core/generated-graphql";
 import { Modal } from "src/components/Shared";
 import { getStashboxBase } from "src/utils";
 import { FormattedMessage, useIntl } from "react-intl";
+import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 
 interface IProps {
   show: boolean;
@@ -72,7 +73,7 @@ export const SubmitStashBoxDraft: React.FC<IProps> = ({
 
   return (
     <Modal
-      icon="paper-plane"
+      icon={faPaperPlane}
       header={intl.formatMessage({ id: "actions.submit_stash_box" })}
       isRunning={loading}
       show={show}
@@ -149,3 +150,5 @@ export const SubmitStashBoxDraft: React.FC<IProps> = ({
     </Modal>
   );
 };
+
+export default SubmitStashBoxDraft;