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

@@ -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>
     );

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>
     );