permalinks: handling failure to get app treaty
@@ -207,7 +207,7 @@ export function AppTile({ color, image, ...props }: AppTileProps) {
width={['48px', '132px']}
marginRight={3}
borderRadius={3}
- bg={color || 'gray'}
+ bg={color || 'washedGray'}
{...props}
>
{image && (
@@ -224,6 +224,17 @@ export function AppTile({ color, image, ...props }: AppTileProps) {
);
}
+const AppSkeleton = props => (
+ <Box
+ width="100%"
+ height="14px"
+ bg="washedGray"
+ borderRadius={2}
+ marginBottom={2}
+ {...props}
+ />
+);
+
function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
const treaty = useTreaty(ship, desk);
const hasProtocolHandling = Boolean(window?.navigator?.registerProtocolHandler);
@@ -244,16 +255,22 @@ function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
bg="washedGray"
borderRadius={3}
>
- {treaty && <AppTile display={['none', 'block']} {...treaty} />}
- <Col>
+ <AppTile display={['none', 'block']} {...treaty} />
+ <Col flex="1">
<Row flexDirection={['row', 'column']} alignItems={['center', 'start']} marginBottom={2}>
- {treaty && <AppTile display={['block', 'none']} {...treaty} />}
+ <AppTile display={['block', 'none']} {...treaty} />
<Col>
- <H3 color="black">{treaty?.title}</H3>
- {treaty?.ship && <Author ship={treaty?.ship} showImage dontShowTime={true} />}
+ <H3 color="black">{ treaty?.title || '%' + desk }</H3>
+ <Author ship={treaty?.ship || ship} showImage dontShowTime={true} />
</Col>
</Row>
- <ClampedText marginBottom={2} color="gray">{treaty?.info}</ClampedText>
+ {treaty && <ClampedText marginBottom={2} color="gray">{treaty.info}</ClampedText>}
+ {!treaty && (
+ <>
+ <AppSkeleton />
+ <AppSkeleton width="80%" />
+ </>
+ )}
<Button as="a" href={href} primary alignSelf="start" display="inline-flex" marginTop="auto">Open App</Button>
</Col>
</Row>
