From 75fce29d7473450040aaa60d2a52a37b65a2f351 Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Thu, 30 Apr 2026 16:50:55 +0000
Subject: [PATCH] fix: move XHR interceptor to
 injectedJavaScriptBeforeContentLoaded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

インターセプターをページスクリプトより前に実行されるよう修正。
injectedJavaScript（ページ読込後）からinjectedJavaScriptBeforeContentLoaded
（ページスクリプト実行前）へ移動することで、モックON時のページフリーズを解消。

- lib/webViewInjectjavascript.ts: injectJavascriptDataからインターセプターを分離、
  generateBeforeContentLoadedScript()を新規エクスポート
- stateBox/useTrainMenu.tsx: injectJavascriptBeforeContentLoadedを別途計算しコンテキストに追加
- components/Apps/WebView.tsx: injectedJavaScriptBeforeContentLoadedプロップを追加

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components/Apps/WebView.tsx    |  2 ++
 lib/webViewInjectjavascript.ts | 17 ++++++++++-------
 stateBox/useTrainMenu.tsx      |  9 +++++++--
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/Apps/WebView.tsx b/components/Apps/WebView.tsx
index 52c8b2c..87c8481 100644
--- a/components/Apps/WebView.tsx
+++ b/components/Apps/WebView.tsx
@@ -34,6 +34,7 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
     setLoadError,
     setTrainInfo,
     injectJavascript,
+    injectJavascriptBeforeContentLoaded,
     mockApiEnabled,
   } = useTrainMenu();
   var urlcache = "";
@@ -166,6 +167,7 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
       contentMode="mobile"
       style={{ backgroundColor: bgColor }}
       {...{ onMessage, onNavigationStateChange, onLoadEnd }}
+      injectedJavaScriptBeforeContentLoaded={injectJavascriptBeforeContentLoaded}
       injectedJavaScript={injectJavascript}
     />
   );
diff --git a/lib/webViewInjectjavascript.ts b/lib/webViewInjectjavascript.ts
index a636d5e..885b695 100644
--- a/lib/webViewInjectjavascript.ts
+++ b/lib/webViewInjectjavascript.ts
@@ -38,12 +38,7 @@ export const injectJavascriptData = ({
   useUnyohub,
   useElesite,
   isDark,
-  mockApiConfig = null,
-}: InjectJavascriptOptions): string => {
-  // XHRインターセプターを先頭に注入（モックモード有効時）
-  const xhrInterceptor = mockApiConfig
-    ? generateXhrInterceptorJs(mockApiConfig)
-    : '';
+}: Omit<InjectJavascriptOptions, 'mockApiConfig'>): string => {
 
   // 一番上のメニュー非表示　地図スイッチによって切り替え
   const topMenu =
@@ -1405,7 +1400,6 @@ setStationMenuDialog.observe(document.querySelector('#disp'), {
 `
       : ``;
   return (
-    xhrInterceptor +
     bootData +
     topMenu +
     trainIcon +
@@ -1416,3 +1410,12 @@ setStationMenuDialog.observe(document.querySelector('#disp'), {
     makeStationMenu
   );
 };
+
+/**
+ * XHRインターセプターJSを生成する（injectedJavaScriptBeforeContentLoaded用）
+ * ページスクリプトより前に実行する必要があるため、別プロップで渡す。
+ */
+export const generateBeforeContentLoadedScript = (mockApiConfig: MockApiConfig | null): string => {
+  if (!mockApiConfig) return '';
+  return generateXhrInterceptorJs(mockApiConfig);
+};
diff --git a/stateBox/useTrainMenu.tsx b/stateBox/useTrainMenu.tsx
index efc6736..d9b4d97 100644
--- a/stateBox/useTrainMenu.tsx
+++ b/stateBox/useTrainMenu.tsx
@@ -10,7 +10,7 @@ import { ASCore } from "../storageControl";
 import { AS } from "../storageControl";
 
 import { getStationList2 } from "../lib/getStationList";
-import { injectJavascriptData } from "../lib/webViewInjectjavascript";
+import { injectJavascriptData, generateBeforeContentLoadedScript } from "../lib/webViewInjectjavascript";
 import { MockApiConfig, TrainEntry } from "../lib/mockApi/webviewXhrInterceptor";
 import { MOCK_TRAIN_POSITIONS } from "../lib/mockApi";
 
@@ -49,6 +49,8 @@ const initialState = {
     elesite: boolean;
   },
   injectJavascript: "",
+  /** injectedJavaScriptBeforeContentLoaded用（XHRインターセプター） */
+  injectJavascriptBeforeContentLoaded: "",
   /** モックAPIが有効かどうか（走行位置画面のスイッチ） */
   mockApiEnabled: false,
   setMockApiEnabled: (e: boolean) => {},
@@ -155,9 +157,11 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
     useUnyohub: useUnyohubSetting,
     useElesite: useEleSiteSetting,
     isDark: useThemeColors().isDark,
-    mockApiConfig,
   });
 
+  // XHRインターセプターはページスクリプトより前に実行が必要
+  const injectJavascriptBeforeContentLoaded = generateBeforeContentLoadedScript(mockApiConfig);
+
   useEffect(() => {
     //列車アイコンスイッチ
     ASCore({
@@ -236,6 +240,7 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
         setUpdatePermission,
         dataSourcePermission,
         injectJavascript,
+        injectJavascriptBeforeContentLoaded,
         mockApiEnabled,
         setMockApiEnabled,
         mockTrainPositions,