diff --git a/web/src/common/src/DatePicker/index.jsx b/web/src/common/src/DatePicker/index.jsx
index 95f01954..439123fa 100644
--- a/web/src/common/src/DatePicker/index.jsx
+++ b/web/src/common/src/DatePicker/index.jsx
@@ -202,7 +202,7 @@ const DatePicker = (props) => {
   const [reloadLoading, setReloadLoading] = useState(false) 
   const onRefreshClick = () => {
     setReloadLoading(true)
-    onRefresh && onRefresh({ start, end });
+    onRefresh && onRefresh({ start, end, refresh: true });
     setTimeout(()=>{
       setReloadLoading(false)
     }, 1000)
diff --git a/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx b/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
index 936bdd5f..756f55d9 100644
--- a/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
+++ b/web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
@@ -24,6 +24,7 @@ export default (props) => {
             queryParams={queryParams}
             timeout={timeout}
             className={styles.lineWrapper}
+            height={150}
             formatMetric={(metric) => {
               if (!metric) return metric;
               let units = "";
diff --git a/web/src/components/Overview/Monitor/index.jsx b/web/src/components/Overview/Monitor/index.jsx
index a9c4e5d6..51b2f6bb 100644
--- a/web/src/components/Overview/Monitor/index.jsx
+++ b/web/src/components/Overview/Monitor/index.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect, useCallback } from "react";
-import { Card, Tabs, Breadcrumb, Button, BackTop, Empty } from "antd";
+import { Card, Tabs, Breadcrumb, Button, BackTop, Empty, Spin } from "antd";
 import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
 import { formatter } from "@/utils/format";
 import moment from "moment";
@@ -66,6 +66,7 @@ const Monitor = (props) => {
       timeInterval: formatTimeInterval(param?.timeInterval),
       timeout: formatTimeout(param?.timeout) || localStorage.getItem(TIMEOUT_CACHE_KEY) || '120s',
       param: param,
+      refresh: true
     })
   );
 
@@ -76,7 +77,7 @@ const Monitor = (props) => {
     setParam({ ...param, timeRange: state.timeRange, timeInterval: state.timeInterval, timeout: state.timeout });
   }, [state.timeRange, state.timeInterval, state.timeout]);
 
-  const handleTimeChange = useCallback(({ start, end, timeInterval, timeout }) => {
+  const handleTimeChange = useCallback(({ start, end, timeInterval, timeout, refresh }) => {
     const bounds = calculateBounds({
       from: start,
       to: end,
@@ -93,9 +94,9 @@ const Monitor = (props) => {
         timeFormatter: formatter.dates(intDay),
       },
       timeInterval: timeInterval || state.timeInterval,
-      timeout: timeout || state.timeout
+      timeout: timeout || state.timeout,
+      refresh
     });
-    setSpinning(true);
   }, [state]) 
 
   const onInfoChange = (info) => {
@@ -112,6 +113,12 @@ const Monitor = (props) => {
     return monitor_configs?.node_stats?.enabled === false && monitor_configs?.index_stats?.enabled === false
   }, [JSON.stringify(selectedCluster?.monitor_configs)])
 
+  console.log("spinning")
+  console.log(spinning)
+  console.log("state.refresh")
+  console.log(state.refresh)
+
+
   return (
     <div>
       <BreadcrumbList data={breadcrumbList} />
@@ -165,12 +172,14 @@ const Monitor = (props) => {
               >
                 {panes.map((pane) => (
                   <TabPane tab={pane.title} key={pane.key}>
-                    <StatisticBar
-                      setSpinning={setSpinning}
-                      onInfoChange={onInfoChange}
-                      {...state}
-                      {...extraParams}
-                    />
+                    <Spin spinning={spinning && !!state.refresh}>
+                      <StatisticBar
+                        setSpinning={setSpinning}
+                        onInfoChange={onInfoChange}
+                        {...state}
+                        {...extraParams}
+                      />
+                    </Spin>
                     <div style={{ marginTop: 15 }}>
                       {checkPaneParams({
                         ...state,
diff --git a/web/src/lib/hooks/use_fetch.js b/web/src/lib/hooks/use_fetch.js
index 91ab10c4..998b0e23 100644
--- a/web/src/lib/hooks/use_fetch.js
+++ b/web/src/lib/hooks/use_fetch.js
@@ -6,7 +6,7 @@ const DEFAULT_OPTIONS = {
 };
 
 export default function useFetch(url, options = {}, dependencies = [], runInInit = true) {
-  const { returnRawResponse, noticeable, ...rest } = options
+  const { returnRawResponse, noticeable, ...rest } = options || {}
   return useAsync(() => {
     return request(url, { ...DEFAULT_OPTIONS, ...rest }, returnRawResponse, noticeable);
   }, dependencies, runInInit);
diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
index 0e63e71a..a5f10813 100644
--- a/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
+++ b/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
@@ -8,17 +8,27 @@ import QueueMetric from "../../components/queue_metric";
 import { ESPrefix } from "@/services/common";
 import { SearchEngines } from "@/lib/search_engines";
 
-const timezone = "local";
-
 export default ({
   selectedCluster,
   clusterID,
   timeRange,
   handleTimeChange,
+  timezone,
   bucketSize,
   timeout,
+  refresh,
 }) => {
 
+  const tabProps = {
+    clusterID,
+    timeRange,
+    handleTimeChange,
+    timezone,
+    bucketSize,
+    timeout,
+    refresh
+  }
+
   const isVersionGTE6 = useMemo(() => {
     if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
     const main = selectedCluster?.version?.split('.')[0]
@@ -56,12 +66,8 @@ export default ({
         })}
       >
         <ClusterMetric
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             'cluster_health',
             'index_throughput', 
@@ -84,14 +90,9 @@ export default ({
         })}
       >
         <NodeMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
               [
                   "operations",
@@ -231,14 +232,9 @@ export default ({
         })}
       >
         <IndexMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             [
                 "operations",
@@ -314,14 +310,9 @@ export default ({
         })}
       >
         <QueueMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             isVersionGTE6 ? [
                 "thread_pool_write",
@@ -397,18 +388,6 @@ export default ({
         ].filter((item) => !!item)}
         />
       </Tabs.TabPane>
-      {/* <Tabs.TabPane
-          key="storage"
-          tab={formatMessage({
-            id: "cluster.monitor.queue.storage",
-          })}
-        >
-          <StorageMetric
-            clusterID={clusterID}
-            timezone={timezone}
-            timeRange={timeRange}
-          />
-        </Tabs.TabPane> */}
     </Tabs>
   );
 }
diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx
index 2346d62d..0f29b883 100644
--- a/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx
+++ b/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx
@@ -1,20 +1,21 @@
 import ClusterMetric from "../../components/cluster_metric";
 import { ESPrefix } from "@/services/common";
 
-const timezone = "local";
-
 export default ({
   clusterID,
   timeRange,
   handleTimeChange,
   bucketSize,
   timeout,
+  timezone,
+  refresh
 }) => {
   return (
     <ClusterMetric
       timezone={timezone}
       timeRange={timeRange}
       timeout={timeout}
+      refresh={refresh}
       handleTimeChange={handleTimeChange}
       overview={1}
       fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}
diff --git a/web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx
index 7c15b218..bc73ee74 100644
--- a/web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx
+++ b/web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx
@@ -2,8 +2,6 @@ import { useState } from "react";
 import StatisticBar from "./statistic_bar";
 import IndexMetric from "../../components/index_metric";
 
-const timezone = "local";
-
 export default ({
   clusterID,
   indexName,
@@ -11,7 +9,9 @@ export default ({
   handleTimeChange,
   shardID,
   bucketSize,
-  timeout
+  timezone,
+  timeout,
+  refresh,
 }) => {
   const [param, setParam] = useState({
     show_top: false,
@@ -28,6 +28,7 @@ export default ({
       shardID={shardID}
       bucketSize={bucketSize}
       timeout={timeout}
+      refresh={refresh}
       metrics={[
         [
             "operations",
diff --git a/web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx b/web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx
index e15a9292..1637e2dc 100644
--- a/web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx
+++ b/web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx
@@ -2,8 +2,6 @@ import { ESPrefix } from "@/services/common";
 import StatisticBar from "./statistic_bar";
 import ClusterMetric from "../../components/cluster_metric";
 
-const timezone = "local";
-
 export default ({
   isAgent,
   clusterID,
@@ -12,7 +10,9 @@ export default ({
   handleTimeChange,
   shardID,
   bucketSize,
-  timeout
+  timezone,
+  timeout,
+  refresh
 }) => {
   let url = `${ESPrefix}/${clusterID}/index/${indexName}/metrics`;
   if(shardID){
@@ -27,6 +27,7 @@ export default ({
       fetchUrl={url}
       bucketSize={bucketSize}
       timeout={timeout}
+      refresh={refresh}
       metrics={[
         "index_health",
         "index_throughput",
diff --git a/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
index 7d27be70..379f3a2b 100644
--- a/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
+++ b/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
@@ -5,18 +5,28 @@ import QueueMetric from "../../components/queue_metric";
 import { formatMessage } from "umi/locale";
 import { SearchEngines } from "@/lib/search_engines";
 
-const timezone = "local";
-
 export default ({
   selectedCluster,
   clusterID,
   nodeID,
   timeRange,
   handleTimeChange,
+  timezone,
   bucketSize,
   timeout,
+  refresh,
 }) => {
 
+  const tabProps = {
+    clusterID,
+    timeRange,
+    handleTimeChange,
+    timezone,
+    bucketSize,
+    timeout,
+    refresh
+  }
+
   const isVersionGTE6 = useMemo(() => {
     if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
     const main = selectedCluster?.version?.split('.')[0]
@@ -59,14 +69,9 @@ export default ({
         })}
       >
         <NodeMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             [
                 "operations",
@@ -206,14 +211,9 @@ export default ({
         })}
       >
         <QueueMetric
-          clusterID={clusterID}
-          timezone={timezone}
-          timeRange={timeRange}
-          handleTimeChange={handleTimeChange}
+          {...tabProps}
           param={param}
           setParam={setParam}
-          bucketSize={bucketSize}
-          timeout={timeout}
           metrics={[
             isVersionGTE6 ? [
                 "thread_pool_write",
diff --git a/web/src/pages/Platform/Overview/Node/Monitor/overview.jsx b/web/src/pages/Platform/Overview/Node/Monitor/overview.jsx
index 8c007819..7df4f7ed 100644
--- a/web/src/pages/Platform/Overview/Node/Monitor/overview.jsx
+++ b/web/src/pages/Platform/Overview/Node/Monitor/overview.jsx
@@ -3,8 +3,6 @@ import StatisticBar from "./statistic_bar";
 import ClusterMetric from "../../components/cluster_metric";
 import { useMemo } from "react";
 
-const timezone = "local";
-
 export default ({
   isAgent,
   clusterID,
@@ -12,7 +10,9 @@ export default ({
   timeRange,
   handleTimeChange,
   bucketSize,
+  timezone,
   timeout,
+  refresh
 }) => {
 
   return (
@@ -20,6 +20,7 @@ export default ({
       timezone={timezone}
       timeRange={timeRange}
       timeout={timeout}
+      refresh={refresh}
       handleTimeChange={handleTimeChange}
       overview={1}
       fetchUrl={`${ESPrefix}/${clusterID}/node/${nodeID}/metrics`}
diff --git a/web/src/pages/Platform/Overview/components/MetricChart.jsx b/web/src/pages/Platform/Overview/components/MetricChart.jsx
index 305171f6..50602ab5 100644
--- a/web/src/pages/Platform/Overview/components/MetricChart.jsx
+++ b/web/src/pages/Platform/Overview/components/MetricChart.jsx
@@ -27,6 +27,7 @@ export default (props) => {
       timezone,
       timeRange,
       timeout,
+      refresh,
       handleTimeChange,
       fetchUrl,
       metricKey,
@@ -82,9 +83,9 @@ export default (props) => {
     }
   
     useEffect(() => {
-      observerRef.current.deps = cloneDeep([queryParams, fetchUrl, metricKey])
-      fetchData(queryParams, fetchUrl, metricKey)
-    }, [JSON.stringify(queryParams), fetchUrl, metricKey])
+      observerRef.current.deps = cloneDeep([queryParams, fetchUrl, metricKey, refresh])
+      fetchData(queryParams, fetchUrl, metricKey, refresh)
+    }, [JSON.stringify(queryParams), fetchUrl, metricKey, refresh])
   
     useEffect(() => {
       const observer = new IntersectionObserver(
@@ -144,7 +145,6 @@ export default (props) => {
     };
 
     const renderChart = () => {
-      if (loading) return <div style={{ height }}></div>
       if (error) {
         return (
           <div style={{ height, padding: 10 }}>
@@ -155,7 +155,14 @@ export default (props) => {
       const axis = metric?.axis || [];
       const lines = metric?.lines || [];
       if (lines.every((item) => !item.data || item.data.length === 0)) {
-        return <Empty style={{ height, margin: 0, paddingTop: 64 }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        return (
+          <div style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Empty style={{ margin: 0}} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </div>
+        )
+      }
+      if (customRenderChart) {
+        return customRenderChart(metric)
       }
       return (
         <Chart
@@ -314,7 +321,7 @@ export default (props) => {
             </span>
           }
         </div>
-        {customRenderChart ? customRenderChart(metric) : renderChart()}
+        {renderChart()}
         </Spin>
       </div>
     );
diff --git a/web/src/pages/Platform/Overview/components/cluster_metric.jsx b/web/src/pages/Platform/Overview/components/cluster_metric.jsx
index 44d96d8b..5958686e 100644
--- a/web/src/pages/Platform/Overview/components/cluster_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/cluster_metric.jsx
@@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
 
 export default (props) => {
 
-  const { fetchUrl, overview, metrics = [], renderExtra, timeRange, timeout, timezone, bucketSize, handleTimeChange } = props
+  const { fetchUrl, overview, metrics = [], renderExtra, timeRange, timeout, timezone, refresh, bucketSize, handleTimeChange } = props
 
   if (!fetchUrl || metrics.length === 0) {
     return null;
@@ -36,6 +36,7 @@ export default (props) => {
             timezone={timezone} 
             timeRange={timeRange} 
             timeout={timeout}
+            refresh={refresh}
             handleTimeChange={handleTimeChange} 
             fetchUrl={fetchUrl}
             metricKey={metricKey}
diff --git a/web/src/pages/Platform/Overview/components/index_metric.jsx b/web/src/pages/Platform/Overview/components/index_metric.jsx
index 44fab94b..88f586bd 100644
--- a/web/src/pages/Platform/Overview/components/index_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/index_metric.jsx
@@ -23,7 +23,8 @@ export default (props) => {
     shardID,
     bucketSize,
     metrics = [],
-    timeout
+    timeout,
+    refresh,
   } = props
   
   if (!clusterID || metrics.length == 0) {
@@ -130,6 +131,7 @@ export default (props) => {
                             queryParams={queryParams}
                             className={"metric-item"}
                             timeout={timeout}
+                            refresh={refresh}
                           />
                         ))
                       }
diff --git a/web/src/pages/Platform/Overview/components/node_metric.jsx b/web/src/pages/Platform/Overview/components/node_metric.jsx
index c4bd0eb9..c8b32cde 100644
--- a/web/src/pages/Platform/Overview/components/node_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/node_metric.jsx
@@ -21,6 +21,7 @@ export default (props) => {
     setParam,
     bucketSize,
     timeout,
+    refresh,
     metrics = []
   } = props
 
@@ -153,6 +154,7 @@ export default (props) => {
                             queryParams={queryParams}
                             className={"metric-item"}
                             timeout={timeout}
+                            refresh={refresh}
                           />
                         ))
                       }
diff --git a/web/src/pages/Platform/Overview/components/queue_metric.jsx b/web/src/pages/Platform/Overview/components/queue_metric.jsx
index c790f7dd..7932b4af 100644
--- a/web/src/pages/Platform/Overview/components/queue_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/queue_metric.jsx
@@ -21,7 +21,8 @@ export default (props) => {
     setParam,
     bucketSize,
     metrics = [],
-    timeout
+    timeout,
+    refresh
   } = props
 
   if (!clusterID || metrics.length == 0) {
@@ -153,6 +154,7 @@ export default (props) => {
                             queryParams={queryParams}
                             className={"metric-item"}
                             timeout={timeout}
+                            refresh={refresh}
                           />
                         ))
                       }