Add Skeleton for metrics section. Refactor time selector into a separ…

…ate component.

airflow/ui/src/components/TimeSelector.tsx

@@ -0,0 +1,85 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  HStack,
+  Text,
+  type SelectValueChangeDetails,
+  type ListCollection,
+} from "@chakra-ui/react";
+import dayjs from "dayjs";
+import { FiCalendar } from "react-icons/fi";
+
+import Time from "src/components/Time";
+import { Select } from "src/components/ui";
+
+type Props = {
+  readonly defaultValue: string;
+  readonly endDate: string;
+  readonly setEndDate: (startDate: string) => void;
+  readonly setStartDate: (startDate: string) => void;
+  readonly startDate: string;
+  readonly timeOptions: ListCollection<{ label: string; value: string }>;
+};
+
+const TimeSelector = ({
+  defaultValue,
+  endDate,
+  setEndDate,
+  setStartDate,
+  startDate,
+  timeOptions,
+}: Props) => {
+  const handleTimeChange = ({
+    value,
+  }: SelectValueChangeDetails<Array<string>>) => {
+    const cnow = dayjs();
+
+    setStartDate(cnow.subtract(Number(value[0]), "hour").toISOString());
+    setEndDate(cnow.toISOString());
+  };
+
+  return (
+    <HStack>
+      <FiCalendar />
+      <Select.Root
+        collection={timeOptions}
+        data-testid="filter-duration"
+        defaultValue={[defaultValue]}
+        onValueChange={handleTimeChange}
+        width="200px"
+      >
+        <Select.Trigger>
+          <Select.ValueText placeholder="Duration" />
+        </Select.Trigger>
+        <Select.Content>
+          {timeOptions.items.map((option) => (
+            <Select.Item item={option} key={option.value}>
+              {option.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+      <Text>
+        <Time datetime={startDate} /> - <Time datetime={endDate} />
+      </Text>
+    </HStack>
+  );
+};
+
+export default TimeSelector;

airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx

@@ -16,24 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  Box,
-  HStack,
-  VStack,
-  Text,
-  createListCollection,
-  type SelectValueChangeDetails,
-} from "@chakra-ui/react";
+import { Box, VStack, createListCollection } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useState } from "react";
-import { FiCalendar } from "react-icons/fi";
 
 import { useDashboardServiceHistoricalMetrics } from "openapi/queries";
 import { ErrorAlert } from "src/components/ErrorAlert";
-import Time from "src/components/Time";
-import { Select } from "src/components/ui";
+import TimeSelector from "src/components/TimeSelector";
 
 import { DagRunMetrics } from "./DagRunMetrics";
+import { MetricSectionSkeleton } from "./MetricSectionSkeleton";
 import { TaskInstanceMetrics } from "./TaskInstanceMetrics";
 
 const timeOptions = createListCollection({
@@ -72,43 +64,19 @@ export const HistoricalMetrics = () => {
       )
     : 0;
 
-  const handleTimeChange = ({
-    value,
-  }: SelectValueChangeDetails<Array<string>>) => {
-    const cnow = dayjs();
-
-    setStartDate(cnow.subtract(Number(value[0]), "hour").toISOString());
-    setEndDate(cnow.toISOString());
-  };
-
   return (
     <Box width="100%">
       <ErrorAlert error={error} />
       <VStack alignItems="left" gap={2}>
-        <HStack>
-          <FiCalendar />
-          <Select.Root
-            collection={timeOptions}
-            data-testid="sort-by-time"
-            defaultValue={[defaultHour]}
-            onValueChange={handleTimeChange}
-            width="200px"
-          >
-            <Select.Trigger>
-              <Select.ValueText placeholder="Duration" />
-            </Select.Trigger>
-            <Select.Content>
-              {timeOptions.items.map((option) => (
-                <Select.Item item={option} key={option.value}>
-                  {option.label}
-                </Select.Item>
-              ))}
-            </Select.Content>
-          </Select.Root>
-          <Text>
-            <Time datetime={startDate} /> - <Time datetime={endDate} />
-          </Text>
-        </HStack>
+        <TimeSelector
+          defaultValue={defaultHour}
+          endDate={endDate}
+          setEndDate={setEndDate}
+          setStartDate={setStartDate}
+          startDate={startDate}
+          timeOptions={timeOptions}
+        />
+        {isLoading ? <MetricSectionSkeleton /> : undefined}
         {!isLoading && data !== undefined && (
           <Box>
             <DagRunMetrics

airflow/ui/src/pages/Dashboard/HistoricalMetrics/MetricSectionSkeleton.tsx

@@ -0,0 +1,26 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { VStack, Skeleton } from "@chakra-ui/react";
+
+export const MetricSectionSkeleton = () => (
+  <VStack height={200} width="full">
+    <Skeleton height={200} width="full" />
+    <Skeleton height={200} width="full" />
+  </VStack>
+);