データ取得中にグラフにローディングの表示追加

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,
   };

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();
@@ -109,7 +110,7 @@ export const Index = () => {
           margin-top: 32px;
         `}
       >
-        <HighchartsReact highcharts={Highcharts} options={highchartsOptions} />
+        <HighchartsReact highcharts={Highcharts} options={highchartsOptions} ref={chartComponentRef} />
       </div>
     </div>
   );