Use infinite scroll in metrics explorer for faster rendering

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/src/pages/query/MetricsExplorer/MetricsExplorer.tsx

@@ -9,6 +9,7 @@ import { IconCodePlus, IconCopy, IconZoomCode } from "@tabler/icons-react";
 import LabelsExplorer from "./LabelsExplorer";
 import { useDebouncedValue } from "@mantine/hooks";
 import classes from "./MetricsExplorer.module.css";
+import CustomInfiniteScroll from "../../../components/CustomInfiniteScroll";
 
 const fuz = new Fuzzy({
   pre: '<b style="color: rgb(0, 102, 191)">',
@@ -83,6 +84,9 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
         }
         autoFocus
       />
+      <CustomInfiniteScroll
+        allItems={searchMatches}
+        child={({ items }) => (
           <Table>
             <Table.Thead>
               <Table.Tr>
@@ -92,7 +96,7 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-          {searchMatches.map((m) => (
+              {items.map((m) => (
                 <Table.Tr key={m.original}>
                   <Table.Td>
                     <Group justify="space-between">
@@ -172,6 +176,8 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
               ))}
             </Table.Tbody>
           </Table>
+        )}
+      />
     </Stack>
   );
 };