Merge pull request #58 from kleros/fix/direct-operation-history

fix(web): fix-history-view-for-direct-operations

web/src/components/HistoryDisplay/index.tsx

@@ -1,5 +1,5 @@
 import { Card, CustomTimeline, _TimelineItem1 } from "@kleros/ui-components-library";
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { css, Theme, useTheme } from "styled-components";
 import Header from "./Header";
 import { useItemRequests } from "queries/useRequestsQuery";
@@ -34,25 +34,41 @@ const StyledTimeline = styled(CustomTimeline)`
   }
 `;
 
+const StyledLabel = styled.label`
+  align-self: center;
+  padding-bottom: 32px;
+`;
+
 interface IHistory {
   itemId: string;
   isItem?: boolean;
 }
 
 const History: React.FC<IHistory> = ({ itemId, isItem }) => {
   const theme = useTheme();
-  const { data } = useItemRequests(itemId);
+  const { data, isLoading } = useItemRequests(itemId);
+
+  const items = useMemo(
+    () =>
+      data?.requests.reduce<_TimelineItem1[]>((acc, request) => {
+        const history = constructItemsFromRequest(request, theme, isItem);
+        acc.push(...history);
+        return acc;
+      }, []),
+    [data]
+  );
+
+  const Component = useMemo(() => {
+    if (!items || isLoading) return <HistorySkeletonCard />;
+    else if (items.length === 0) return <StyledLabel>No requests yet.</StyledLabel>;
 
-  const items = data?.requests.reduce<_TimelineItem1[]>((acc, request) => {
-    const history = constructItemsFromRequest(request, theme, isItem);
-    acc.push(...history);
-    return acc;
-  }, []);
+    return <StyledTimeline {...{ items }} />;
+  }, [items, isLoading]);
 
   return (
     <Container>
       <Header />
-      {items ? <StyledTimeline {...{ items }} /> : <HistorySkeletonCard />}
+      {Component}
     </Container>
   );
 };