From 858c181adab65d17c7f2d2ab00b39c5271fcef33 Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Wed, 29 Sep 2021 17:56:20 +1000
Subject: [PATCH 1/2] Remove `Updated:` label from timestamp component

This makes it more composable by not forcing the label onto the
user of the component.
---
 frontend/src/components/CurrentPrice.tsx | 5 ++++-
 frontend/src/components/Timestamp.tsx    | 2 +-
 frontend/src/components/Wallet.tsx       | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/CurrentPrice.tsx b/frontend/src/components/CurrentPrice.tsx
index fa94833..9f5ede7 100644
--- a/frontend/src/components/CurrentPrice.tsx
+++ b/frontend/src/components/CurrentPrice.tsx
@@ -35,7 +35,10 @@ export default function CurrentPrice(
                 {ask}
             </HStack>
             <Divider marginTop={2} marginBottom={2} />
-            {timestamp}
+            <HStack>
+                <Text align={"left"}>Updated:</Text>
+                {timestamp}
+            </HStack>
         </Box>
     );
 }
diff --git a/frontend/src/components/Timestamp.tsx b/frontend/src/components/Timestamp.tsx
index a3709aa..cf46e31 100644
--- a/frontend/src/components/Timestamp.tsx
+++ b/frontend/src/components/Timestamp.tsx
@@ -13,7 +13,7 @@ export default function Timestamp(
 ) {
     return (
         <Text>
-            Updated: {unixTimestampToDate(timestamp).toLocaleDateString("en-US", {
+            {unixTimestampToDate(timestamp).toLocaleDateString("en-US", {
                 year: "numeric",
                 month: "numeric",
                 day: "numeric",
diff --git a/frontend/src/components/Wallet.tsx b/frontend/src/components/Wallet.tsx
index 209beba..e62a59a 100644
--- a/frontend/src/components/Wallet.tsx
+++ b/frontend/src/components/Wallet.tsx
@@ -44,7 +44,10 @@ export default function Wallet(
             <Divider marginTop={2} marginBottom={2} />
             {address}
             <Divider marginTop={2} marginBottom={2} />
-            {timestamp}
+            <HStack>
+                <Text align={"left"}>Updated:</Text>
+                {timestamp}
+            </HStack>
         </Box>
     );
 }

From 91522bc4d940c3665ac850e4225bbf75d722cdab Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Wed, 29 Sep 2021 17:58:22 +1000
Subject: [PATCH 2/2] Re-work use of `Skeleton` to hide the content we are
 loading

Destructing the nullable object into its fields gives us an opportunity
to assign an empty object instead (via `||`).
---
 frontend/src/components/CurrentPrice.tsx | 22 ++++++-------
 frontend/src/components/Wallet.tsx       | 39 +++++++++++-------------
 2 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/CurrentPrice.tsx b/frontend/src/components/CurrentPrice.tsx
index 9f5ede7..1f754ab 100644
--- a/frontend/src/components/CurrentPrice.tsx
+++ b/frontend/src/components/CurrentPrice.tsx
@@ -12,32 +12,30 @@ export default function CurrentPrice(
         priceInfo,
     }: Props,
 ) {
-    let bid = <Skeleton height="20px" />;
-    let ask = <Skeleton height="20px" />;
-    let timestamp = <Skeleton height="20px" />;
-
-    if (priceInfo) {
-        bid = <Text>{priceInfo.bid} USD</Text>;
-        ask = <Text>{priceInfo.ask} USD</Text>;
-        timestamp = <Timestamp timestamp={priceInfo.last_updated_at} />;
-    }
+    const { ask, bid, last_updated_at } = priceInfo || {};
 
     return (
         <Box shadow={"md"} marginBottom={5} padding={5}>
             <Center><Text fontWeight={"bold"}>Current Price</Text></Center>
             <HStack>
                 <Text align={"left"}>Bid:</Text>
-                {bid}
+                <Skeleton isLoaded={bid != null}>
+                    <Text>{bid} USD</Text>
+                </Skeleton>
             </HStack>
             <Divider marginTop={2} marginBottom={2} />
             <HStack>
                 <Text align={"left"}>Ask:</Text>
-                {ask}
+                <Skeleton isLoaded={ask != null}>
+                    <Text>{ask} USD</Text>
+                </Skeleton>
             </HStack>
             <Divider marginTop={2} marginBottom={2} />
             <HStack>
                 <Text align={"left"}>Updated:</Text>
-                {timestamp}
+                <Skeleton isLoaded={last_updated_at != null}>
+                    <Timestamp timestamp={last_updated_at!} />
+                </Skeleton>
             </HStack>
         </Box>
     );
diff --git a/frontend/src/components/Wallet.tsx b/frontend/src/components/Wallet.tsx
index e62a59a..19ff5ba 100644
--- a/frontend/src/components/Wallet.tsx
+++ b/frontend/src/components/Wallet.tsx
@@ -14,39 +14,34 @@ export default function Wallet(
     }: WalletProps,
 ) {
     const { hasCopied, onCopy } = useClipboard(walletInfo ? walletInfo.address : "");
-
-    let balance = <Skeleton height="20px" />;
-    let address = <Skeleton height="20px" />;
-    let timestamp = <Skeleton height="20px" />;
-
-    if (walletInfo) {
-        balance = <Text>{walletInfo.balance} BTC</Text>;
-        address = (
-            <HStack>
-                <Text isTruncated>{walletInfo.address}</Text>
-                <IconButton
-                    aria-label="Copy to clipboard"
-                    icon={hasCopied ? <CheckIcon /> : <CopyIcon />}
-                    onClick={onCopy}
-                />
-            </HStack>
-        );
-        timestamp = <Timestamp timestamp={walletInfo.last_updated_at} />;
-    }
+    const { balance, address, last_updated_at } = walletInfo || {};
 
     return (
         <Box shadow={"md"} marginBottom={5} padding={5}>
             <Center><Text fontWeight={"bold"}>Your wallet</Text></Center>
             <HStack>
                 <Text align={"left"}>Balance:</Text>
-                {balance}
+                <Skeleton isLoaded={balance != null}>
+                    <Text>{balance} BTC</Text>
+                </Skeleton>
             </HStack>
             <Divider marginTop={2} marginBottom={2} />
-            {address}
+            <Skeleton isLoaded={address != null}>
+                <HStack>
+                    <Text isTruncated>{address}</Text>
+                    <IconButton
+                        aria-label="Copy to clipboard"
+                        icon={hasCopied ? <CheckIcon /> : <CopyIcon />}
+                        onClick={onCopy}
+                    />
+                </HStack>
+            </Skeleton>
             <Divider marginTop={2} marginBottom={2} />
             <HStack>
                 <Text align={"left"}>Updated:</Text>
-                {timestamp}
+                <Skeleton isLoaded={last_updated_at != null}>
+                    <Timestamp timestamp={last_updated_at!} />
+                </Skeleton>
             </HStack>
         </Box>
     );