From 955e72437a8df9938830d9651ba9228a00c6dbeb Mon Sep 17 00:00:00 2001
From: mikan3rd <mikan.no.kikoushi@gmail.com>
Date: Tue, 5 Sep 2023 12:20:20 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20=E3=83=AD=E3=83=BC=E3=83=87=E3=82=A3?=
 =?UTF-8?q?=E3=83=B3=E3=82=B0=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/Index/index.hook.tsx | 25 +++++++++++++++++++++++-
 src/components/page/Index/index.tsx      |  7 ++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/page/Index/index.hook.tsx b/src/components/page/Index/index.hook.tsx
index af8a0eb..b744720 100644
--- a/src/components/page/Index/index.hook.tsx
+++ b/src/components/page/Index/index.hook.tsx
@@ -1,4 +1,6 @@
 import { Options, SeriesLineOptions } from "highcharts";
+// eslint-disable-next-line import/no-named-as-default
+import HighchartsReact from "highcharts-react-official";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import {
@@ -15,6 +17,7 @@ export const useIndex = () => {
   const [targetDataIndex, setTargetDataIndex] = useState<number>(0);
 
   const isInitialized = useRef(false);
+  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
 
   const [prefecturesData] = trpc.getPrefectures.useSuspenseQuery();
 
@@ -29,6 +32,8 @@ export const useIndex = () => {
 
   const populationsData = useGetPopulationsQueries(prefectures);
 
+  const isFetching = useMemo(() => populationsData.some(({ isFetching }) => isFetching), [populationsData]);
+
   const checkedPopulations = useMemo(() => {
     const checkedPopulations: Exclude<GetPopulationQueryResultType["data"], undefined>[] = [];
     populationsData.forEach(({ data }) => {
@@ -74,7 +79,14 @@ export const useIndex = () => {
       yAxis: { title: { text: "人口" } },
       series: highchartsSeries,
       credits: { enabled: false },
-      lang: { noData: "都道府県を選択してください" },
+      lang: {
+        noData: "都道府県を選択してください",
+        loading: "データ取得中...",
+      },
+      loading: {
+        hideDuration: 1000,
+        showDuration: 1000,
+      },
     };
     return options;
   }, [highchartsSeries, targetLabel]);
@@ -126,11 +138,22 @@ export const useIndex = () => {
     isInitialized.current = true;
   }, [checkedPrefCodes.size, handleSetCheckedPrefCodes, prefecturesData.result]);
 
+  // データ取得中にローディングを表示する
+  useEffect(() => {
+    const chart = chartComponentRef.current?.chart;
+    if (isFetching) {
+      chart?.showLoading();
+    } else {
+      chart?.hideLoading();
+    }
+  }, [isFetching]);
+
   return {
     prefectures,
     labels,
     targetDataIndex,
     highchartsOptions,
+    chartComponentRef,
     handleChangeCheckedCode,
     handleChangeTargetDataIndex,
   };
diff --git a/src/components/page/Index/index.tsx b/src/components/page/Index/index.tsx
index 1ebc4e7..e88c96a 100644
--- a/src/components/page/Index/index.tsx
+++ b/src/components/page/Index/index.tsx
@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import Highcharts from "highcharts";
+import * as Highcharts from "highcharts";
 import { HighchartsReact } from "highcharts-react-official";
 
 import { useIndex } from "./index.hook";
@@ -13,6 +13,7 @@ export const Index = () => {
     labels,
     targetDataIndex,
     highchartsOptions,
+    chartComponentRef,
     handleChangeCheckedCode,
     handleChangeTargetDataIndex,
   } = useIndex();
@@ -35,7 +36,7 @@ export const Index = () => {
             font-size: 18px;
           `}
         >
-          都道府県を選択してください
+          都道府県を選択してください（複数可）
         </h2>
         <div
           className={css`
@@ -109,7 +110,7 @@ export const Index = () => {
           margin-top: 32px;
         `}
       >
-        <HighchartsReact highcharts={Highcharts} options={highchartsOptions} />
+        <HighchartsReact highcharts={Highcharts} options={highchartsOptions} ref={chartComponentRef} />
       </div>
     </div>
   );