React code splitting (#2603)

* Code split using react lazy * Split locales * Move to lodash-es * Import individual icons
2025-12-18 12:54:38 +03:00 · 2022-06-22 14:41:31 +10:00
parent 33b68b4464
commit 3b4b20e9b2
147 changed files with 969 additions and 610 deletions
--- a/ui/v2.5/src/components/Settings/Inputs.tsx
+++ b/ui/v2.5/src/components/Settings/Inputs.tsx
@@ -1,3 +1,4 @@
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import React, { useState } from "react";
 import { Button, Collapse, Form, Modal, ModalProps } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -94,7 +95,7 @@ export const SettingGroup: React.FC<PropsWithChildren<ISettingGroup>> = ({
        variant="minimal"
        onClick={() => setOpen(!open)}
      >
-        <Icon className="fa-fw" icon={open ? "chevron-up" : "chevron-down"} />
+        <Icon className="fa-fw" icon={open ? faChevronUp : faChevronDown} />
      </Button>
    );
  }
--- a/ui/v2.5/src/components/Settings/Settings.tsx
+++ b/ui/v2.5/src/components/Settings/Settings.tsx
@@ -148,3 +148,5 @@ export const Settings: React.FC = () => {
    </Tab.Container>
  );
 };
+
+export default Settings;
--- a/ui/v2.5/src/components/Settings/SettingsLibraryPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsLibraryPanel.tsx
@@ -5,6 +5,7 @@ import { SettingSection } from "./SettingSection";
 import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";
 import { SettingStateContext } from "./context";
 import { useIntl } from "react-intl";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";

 export const SettingsLibraryPanel: React.FC = () => {
  const intl = useIntl();
@@ -85,7 +86,7 @@ export const SettingsLibraryPanel: React.FC = () => {
                rel="noopener noreferrer"
                target="_blank"
              >
-                <Icon icon="question-circle" />
+                <Icon icon={faQuestionCircle} />
              </a>
            </span>
          }
@@ -107,7 +108,7 @@ export const SettingsLibraryPanel: React.FC = () => {
                rel="noopener noreferrer"
                target="_blank"
              >
-                <Icon icon="question-circle" />
+                <Icon icon={faQuestionCircle} />
              </a>
            </span>
          }
--- a/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
@@ -8,6 +8,7 @@ import { TextUtils } from "src/utils";
 import { CollapseButton, Icon, LoadingIndicator } from "src/components/Shared";
 import { SettingSection } from "./SettingSection";
 import { Setting, SettingGroup } from "./Inputs";
+import { faLink, faSyncAlt } from "@fortawesome/free-solid-svg-icons";

 export const SettingsPluginsPanel: React.FC = () => {
  const Toast = useToast();
@@ -30,7 +31,7 @@ export const SettingsPluginsPanel: React.FC = () => {
              target="_blank"
              rel="noopener noreferrer"
            >
-              <Icon icon="link" />
+              <Icon icon={faLink} />
            </a>
          </Button>
        );
@@ -105,7 +106,7 @@ export const SettingsPluginsPanel: React.FC = () => {
        <Setting headingID="actions.reload_plugins">
          <Button onClick={() => onReloadPlugins()}>
            <span className="fa-icon">
-              <Icon icon="sync-alt" />
+              <Icon icon={faSyncAlt} />
            </span>
            <span>
              <FormattedMessage id="actions.reload_plugins" />
--- a/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx
@@ -16,6 +16,7 @@ import { SettingSection } from "./SettingSection";
 import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";
 import { SettingStateContext } from "./context";
 import { StashBoxSetting } from "./StashBoxConfiguration";
+import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";

 interface IURLList {
  urls: string[];
@@ -361,7 +362,7 @@ export const SettingsScrapingPanel: React.FC = () => {
        <div className="content">
          <Button onClick={() => onReloadScrapers()}>
            <span className="fa-icon">
-              <Icon icon="sync-alt" />
+              <Icon icon={faSyncAlt} />
            </span>
            <span>
              <FormattedMessage id="actions.reload_scrapers" />
--- a/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx
@@ -13,6 +13,11 @@ import { DurationInput, Icon, LoadingIndicator, Modal } from "../Shared";
 import { SettingSection } from "./SettingSection";
 import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";
 import { SettingStateContext } from "./context";
+import {
+  faClock,
+  faTimes,
+  faUserClock,
+} from "@fortawesome/free-solid-svg-icons";

 export const SettingsServicesPanel: React.FC = () => {
  const intl = useIntl();
@@ -231,7 +236,7 @@ export const SettingsServicesPanel: React.FC = () => {
      <Modal
        show={enableDisable !== undefined}
        header={capitalised}
-        icon="clock"
+        icon={faClock}
        accept={{
          text: capitalised,
          variant: "primary",
@@ -273,7 +278,7 @@ export const SettingsServicesPanel: React.FC = () => {
          { id: "config.dlna.allow_temp_ip" },
          { tempIP }
        )}
-        icon="clock"
+        icon={faClock}
        accept={{
          text: intl.formatMessage({ id: "actions.allow" }),
          variant: "primary",
@@ -335,7 +340,7 @@ export const SettingsServicesPanel: React.FC = () => {
                  variant="danger"
                  onClick={() => onDisallowTempIP(a.ipAddress)}
                >
-                  <Icon icon="times" />
+                  <Icon icon={faTimes} />
                </Button>
              </div>
            </li>
@@ -364,7 +369,7 @@ export const SettingsServicesPanel: React.FC = () => {
                title={intl.formatMessage({ id: "actions.allow_temporarily" })}
                onClick={() => setTempIP(a)}
              >
-                <Icon icon="user-clock" />
+                <Icon icon={faUserClock} />
              </Button>
            </div>
          </li>
@@ -386,7 +391,7 @@ export const SettingsServicesPanel: React.FC = () => {
              onClick={() => setTempIP(ipEntry)}
              disabled={!ipEntry}
            >
-              <Icon icon="user-clock" />
+              <Icon icon={faUserClock} />
            </Button>
          </div>
        </li>
--- a/ui/v2.5/src/components/Settings/StashConfiguration.tsx
+++ b/ui/v2.5/src/components/Settings/StashConfiguration.tsx
@@ -1,3 +1,4 @@
+import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
 import React, { useState } from "react";
 import { Button, Form, Row, Col, Dropdown } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
@@ -72,7 +73,7 @@ const Stash: React.FC<IStashProps> = ({
            id={`stash-menu-${index}`}
            className="minimal"
          >
-            <Icon icon="ellipsis-v" />
+            <Icon icon={faEllipsisV} />
          </Dropdown.Toggle>
          <Dropdown.Menu className="bg-secondary text-white">
            <Dropdown.Item onClick={() => onEdit()}>
--- a/ui/v2.5/src/components/Settings/Tasks/DataManagementTasks.tsx
+++ b/ui/v2.5/src/components/Settings/Tasks/DataManagementTasks.tsx
@@ -15,10 +15,16 @@ import { ImportDialog } from "./ImportDialog";
 import * as GQL from "src/core/generated-graphql";
 import { SettingSection } from "../SettingSection";
 import { BooleanSetting, Setting } from "../Inputs";
-import { ManualLink } from "src/components/Help/Manual";
+import { ManualLink } from "src/components/Help/context";
 import { Icon } from "src/components/Shared";
 import { ConfigurationContext } from "src/hooks/Config";
 import { FolderSelect } from "src/components/Shared/FolderSelect/FolderSelect";
+import {
+  faMinus,
+  faPlus,
+  faQuestionCircle,
+  faTrashAlt,
+} from "@fortawesome/free-solid-svg-icons";

 interface ICleanDialog {
  pathSelection?: boolean;
@@ -63,7 +69,7 @@ const CleanDialog: React.FC<ICleanDialog> = ({
  return (
    <Modal
      show
-      icon="trash-alt"
+      icon={faTrashAlt}
      disabled={pathSelection && paths.length === 0}
      accept={{
        text: intl.formatMessage({ id: "actions.clean" }),
@@ -87,7 +93,7 @@ const CleanDialog: React.FC<ICleanDialog> = ({
                  title={intl.formatMessage({ id: "actions.delete" })}
                  onClick={() => removePath(p)}
                >
-                  <Icon icon="minus" />
+                  <Icon icon={faMinus} />
                </Button>
              </Col>
            </Row>
@@ -103,7 +109,7 @@ const CleanDialog: React.FC<ICleanDialog> = ({
                  variant="secondary"
                  onClick={() => addPath(currentDirectory)}
                >
-                  <Icon icon="plus" />
+                  <Icon icon={faPlus} />
                </Button>
              }
            />
@@ -188,7 +194,7 @@ export const DataManagementTasks: React.FC<IDataManagementTasks> = ({
    return (
      <Modal
        show={dialogOpen.importAlert}
-        icon="trash-alt"
+        icon={faTrashAlt}
        accept={{
          text: intl.formatMessage({ id: "actions.import" }),
          variant: "danger",
@@ -316,7 +322,7 @@ export const DataManagementTasks: React.FC<IDataManagementTasks> = ({
              <>
                <FormattedMessage id="actions.clean" />
                <ManualLink tab="Tasks">
-                  <Icon icon="question-circle" />
+                  <Icon icon={faQuestionCircle} />
                </ManualLink>
              </>
            }
--- a/ui/v2.5/src/components/Settings/Tasks/DirectorySelectionDialog.tsx
+++ b/ui/v2.5/src/components/Settings/Tasks/DirectorySelectionDialog.tsx
@@ -1,3 +1,8 @@
+import {
+  faMinus,
+  faPencilAlt,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import React, { useState } from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
 import { useIntl } from "react-intl";
@@ -41,7 +46,7 @@ export const DirectorySelectionDialog: React.FC<IDirectorySelectionDialogProps>
      show
      modalProps={{ animation }}
      disabled={!allowEmpty && paths.length === 0}
-      icon="pencil-alt"
+      icon={faPencilAlt}
      header={intl.formatMessage({ id: "actions.select_folders" })}
      accept={{
        onClick: () => {
@@ -69,7 +74,7 @@ export const DirectorySelectionDialog: React.FC<IDirectorySelectionDialogProps>
                title={intl.formatMessage({ id: "actions.delete" })}
                onClick={() => removePath(p)}
              >
-                <Icon icon="minus" />
+                <Icon icon={faMinus} />
              </Button>
            </Col>
          </Row>
@@ -84,7 +89,7 @@ export const DirectorySelectionDialog: React.FC<IDirectorySelectionDialogProps>
              variant="secondary"
              onClick={() => addPath(currentDirectory)}
            >
-              <Icon icon="plus" />
+              <Icon icon={faPlus} />
            </Button>
          }
        />
--- a/ui/v2.5/src/components/Settings/Tasks/ImportDialog.tsx
+++ b/ui/v2.5/src/components/Settings/Tasks/ImportDialog.tsx
@@ -5,6 +5,7 @@ import { Modal } from "src/components/Shared";
 import * as GQL from "src/core/generated-graphql";
 import { useToast } from "src/hooks";
 import { useIntl } from "react-intl";
+import { faPencilAlt } from "@fortawesome/free-solid-svg-icons";

 interface IImportDialogProps {
  onClose: () => void;
@@ -115,7 +116,7 @@ export const ImportDialog: React.FC<IImportDialogProps> = (
  return (
    <Modal
      show
-      icon="pencil-alt"
+      icon={faPencilAlt}
      header={intl.formatMessage({ id: "actions.import" })}
      accept={{
        onClick: () => {
--- a/ui/v2.5/src/components/Settings/Tasks/JobTable.tsx
+++ b/ui/v2.5/src/components/Settings/Tasks/JobTable.tsx
@@ -7,8 +7,15 @@ import {
 } from "src/core/StashService";
 import * as GQL from "src/core/generated-graphql";
 import { Icon } from "src/components/Shared";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { useIntl } from "react-intl";
+import {
+  faBan,
+  faCheck,
+  faCircle,
+  faCog,
+  faHourglassStart,
+  faTimes,
+} from "@fortawesome/free-solid-svg-icons";

 type JobFragment = Pick<
  GQL.Job,
@@ -68,25 +75,25 @@ const Task: React.FC<IJob> = ({ job }) => {
  }

  function getStatusIcon() {
-    let icon: IconProp = "circle";
+    let icon = faCircle;
    let iconClass = "";
    switch (job.status) {
      case GQL.JobStatus.Ready:
-        icon = "hourglass-start";
+        icon = faHourglassStart;
        break;
      case GQL.JobStatus.Running:
-        icon = "cog";
+        icon = faCog;
        iconClass = "fa-spin";
        break;
      case GQL.JobStatus.Stopping:
-        icon = "cog";
+        icon = faCog;
        iconClass = "fa-spin";
        break;
      case GQL.JobStatus.Finished:
-        icon = "check";
+        icon = faCheck;
        break;
      case GQL.JobStatus.Cancelled:
-        icon = "ban";
+        icon = faBan;
        break;
    }

@@ -138,7 +145,7 @@ const Task: React.FC<IJob> = ({ job }) => {
          onClick={() => stopJob()}
          disabled={!canStop()}
        >
-          <Icon icon="times" />
+          <Icon icon={faTimes} />
        </Button>
        <div className={`job-status ${getStatusClass()}`}>
          <div>
--- a/ui/v2.5/src/components/Settings/Tasks/LibraryTasks.tsx
+++ b/ui/v2.5/src/components/Settings/Tasks/LibraryTasks.tsx
@@ -17,8 +17,9 @@ import { useToast } from "src/hooks";
 import { GenerateOptions } from "./GenerateOptions";
 import { SettingSection } from "../SettingSection";
 import { BooleanSetting, Setting, SettingGroup } from "../Inputs";
-import { ManualLink } from "src/components/Help/Manual";
+import { ManualLink } from "src/components/Help/context";
 import { Icon } from "src/components/Shared";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";

 interface IAutoTagOptions {
  options: GQL.AutoTagMetadataInput;
@@ -296,7 +297,7 @@ export const LibraryTasks: React.FC = () => {
              <>
                <FormattedMessage id="actions.scan" />
                <ManualLink tab="Tasks">
-                  <Icon icon="question-circle" />
+                  <Icon icon={faQuestionCircle} />
                </ManualLink>
              </>
            ),
@@ -335,7 +336,7 @@ export const LibraryTasks: React.FC = () => {
            <>
              <FormattedMessage id="config.tasks.identify.heading" />
              <ManualLink tab="Identify">
-                <Icon icon="question-circle" />
+                <Icon icon={faQuestionCircle} />
              </ManualLink>
            </>
          }
@@ -358,7 +359,7 @@ export const LibraryTasks: React.FC = () => {
              <>
                <FormattedMessage id="actions.auto_tag" />
                <ManualLink tab="AutoTagging">
-                  <Icon icon="question-circle" />
+                  <Icon icon={faQuestionCircle} />
                </ManualLink>
              </>
            ),
@@ -399,7 +400,7 @@ export const LibraryTasks: React.FC = () => {
              <>
                <FormattedMessage id="actions.generate" />
                <ManualLink tab="Tasks">
-                  <Icon icon="question-circle" />
+                  <Icon icon={faQuestionCircle} />
                </ManualLink>
              </>
            ),
--- a/ui/v2.5/src/components/Settings/context.tsx
+++ b/ui/v2.5/src/components/Settings/context.tsx
@@ -1,5 +1,9 @@
 import { ApolloError } from "@apollo/client/errors";
-import { debounce } from "lodash";
+import {
+  faCheckCircle,
+  faTimesCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import debounce from "lodash-es/debounce";
 import React, {
  useState,
  useEffect,
@@ -452,7 +456,7 @@ export const SettingsContext: React.FC = ({ children }) => {
    if (updateSuccess === false) {
      return (
        <div className="loading-indicator failed">
-          <Icon icon="times-circle" className="fa-fw" />
+          <Icon icon={faTimesCircle} className="fa-fw" />
        </div>
      );
    }
@@ -477,7 +481,7 @@ export const SettingsContext: React.FC = ({ children }) => {
    if (updateSuccess) {
      return (
        <div className="loading-indicator success">
-          <Icon icon="check-circle" className="fa-fw" />
+          <Icon icon={faCheckCircle} className="fa-fw" />
        </div>
      );
    }