lint

Author: n1ru4l

packages/web/app/src/pages/target-trace.tsx

@@ -224,6 +224,7 @@ function TreeIcon(props: {
             y1="0"
             y2={index === props.level - 1 && props.isLastChild ? 16 : 32}
             stroke="currentColor"
+            key={`${props.level}_${index}`}
           />
         ) : null,
       )}
@@ -937,9 +938,9 @@ export function TraceSheet(props: TraceSheetProps) {
                               setHighlightedEvent(null);
                             }}
                             className="mb-2 block"
+                            key={event.id}
                           >
                             <ExceptionTeaser
-                              key={event.id}
                               type={String(event.attributes['exception.type'] ?? '')}
                               message={String(event.attributes['exception.message'] ?? '')}
                               stacktrace={String(event.attributes['exception.stacktrace'] ?? '')}
@@ -1533,9 +1534,9 @@ function SpanSheet(props: SpanSheetProps) {
                 <div>
                   {span.events.length > 0 ? (
                     <div className="px-1 pt-2">
-                      {span.events.map(event => {
+                      {span.events.map((event, index) => {
                         return (
-                          <div className="mb-2">
+                          <div className="mb-2" key={`${event.name}_${event.date}_${index}`}>
                             <ExceptionTeaser
                               type={event.attributes['exception.type'] ?? ''}
                               message={event.attributes['exception.message'] ?? ''}

packages/web/app/src/pages/target-traces.tsx

@@ -1,7 +1,15 @@
 import { Fragment, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
-import { ArrowDown, ArrowUp, ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  Clock,
+  ExternalLinkIcon,
+  LoaderCircleIcon,
+  XIcon,
+} from 'lucide-react';
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
 import { useClient, useQuery } from 'urql';
 import { z } from 'zod';
@@ -660,7 +668,13 @@ const TracesList = memo(function TracesList(
             }}
             disabled={props.isFetchingMore || !props.fetchMore}
           >
-            Load more
+            {props.isFetchingMore ? (
+              <>
+                <LoaderCircleIcon className="mr-2 inline size-4 animate-spin" /> Loading
+              </>
+            ) : (
+              'Load more'
+            )}
           </Button>
         </div>
       </div>
@@ -1148,7 +1162,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     },
   });
 
-  const [isFetchMore, setIsFetchingMore] = useState(false);
+  const [isFetchingMore, setIsFetchingMore] = useState(false);
 
   const traces = useMemo(
     () => query.data?.target?.traces.edges.map(e => e.node),
@@ -1272,7 +1286,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
               selectedTraceId={selectedTraceId}
               isFetching={query.fetching}
               filter={filter}
-              isFetchingMore={isFetchMore}
+              isFetchingMore={isFetchingMore}
               fetchMore={
                 query.data?.target?.traces.pageInfo.hasNextPage
                   ? () => {
@@ -1284,7 +1298,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
                       }
                       setIsFetchingMore(true);
 
-                      urql
+                      void urql
                         .query(TargetTracesFetchMoreTracesQuery, {
                           targetRef: {
                             organizationSlug: targetRef.organizationSlug,