Add offline renderer function & offline pop component

source/Component/ProcessPopup/ProcessPopup.scss

@@ -0,0 +1,42 @@
+@import "../Theme/Theme.scss";
+
+div.process-popup {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+
+	div.ms-ProgressIndicator {
+		transform: none;
+
+		div.ms-ProgressIndicator-progressTrack {
+			transform: none;
+		}
+	
+		div.ms-ProgressIndicator-progressBar {
+			transform: none;
+		}
+	}
+}
+
+div.confirm-root.dark div.ms-ProgressIndicator {
+
+	div.ms-ProgressIndicator-progressTrack {
+		background-color: $lt-bg-color-lvl3-dark;
+	}
+
+	div.ms-ProgressIndicator-progressBar {
+		background-color: $lt-font-color-normal-dark;
+	}
+}
+
+div.confirm-root.light div.ms-ProgressIndicator {
+
+	div.ms-ProgressIndicator-progressTrack {
+		background-color: $lt-bg-color-lvl3-light;
+	}
+
+	div.ms-ProgressIndicator-progressBar {
+		background-color: $lt-font-color-normal-light;
+	}
+}

source/Component/ProcessPopup/ProcessPopup.tsx

@@ -0,0 +1,89 @@
+import { Component, ReactNode } from "react";
+import { Popup } from "@Context/Popups";
+import { Localization } from "@Component/Localization/Localization";
+import { ConfirmContent } from "@Component/ConfirmPopup/ConfirmPopup";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { ProgressIndicator } from "@fluentui/react";
+import { ActuatorModel } from "@Model/Actuator";
+import "./ProcessPopup.scss";
+
+interface IProcessPopupProps {
+	close?: () => void;
+}
+
+class ProcessPopup extends Popup<IProcessPopupProps> {
+
+	public minWidth: number = 400;
+	public minHeight: number = 150;
+	public width: number = 400;
+	public height: number = 150;
+
+	public maskForSelf: boolean = true;
+
+	public onClose(): void {}
+
+	public onRenderHeader(): ReactNode {
+		return <Localization i18nKey="Popup.Offline.Render.Process.Title"/>
+	}
+
+	public render(): ReactNode {
+		return <ProcessPopupComponent {...this.props} close={() => this.close()}/>
+	}
+}
+
+@useStatusWithEvent("offlineLoop", "actuatorStartChange", "recordLoop")
+class ProcessPopupComponent extends Component<IProcessPopupProps & IMixinStatusProps> {
+
+	public render(): ReactNode {
+
+		let current = this.props.status?.actuator.offlineCurrentFrame ?? 0;
+		let all = this.props.status?.actuator.offlineAllFrame ?? 0;
+
+		const isRendering = this.props.status?.actuator.mod === ActuatorModel.Offline;
+		let i18nKey = "";
+		let color: undefined | "red";
+		let onClick = () => {};
+
+		if (isRendering) {
+			i18nKey = "Popup.Offline.Render.Input.End";
+			color = "red";
+			onClick = () => {
+				this.props.status?.actuator.endOfflineRender();
+				this.forceUpdate();
+			}
+		}
+
+		else {
+			i18nKey = "Popup.Offline.Render.Input.Finished";
+			onClick = () => {
+				this.props.close && this.props.close();
+			}
+		}
+
+		return <ConfirmContent
+			className="process-popup"
+			actions={[{
+				i18nKey: i18nKey,
+				color: color,
+				onClick: onClick
+			}]}
+		>
+
+			<ProgressIndicator
+				percentComplete={current / all}
+				barHeight={3}
+			/>
+
+			<Localization
+				i18nKey="Popup.Offline.Render.Process"
+				options={{
+					current: current.toString(),
+					all: all.toString()
+				}}
+			/>
+
+		</ConfirmContent>
+	}
+}
+
+export { ProcessPopup };