feat(fuselage): Add loading Skeleton to CodeSnippet (#632)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
RocketChat · Feb 1, 2022 · 46fe245 · 46fe245
1 parent a9f5d38
commit 46fe245
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.stories.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.stories.tsx
@@ -31,3 +31,9 @@ export const NoCopyButton = Template.bind({});
 NoCopyButton.args = {
   children: 'curl -L https://go.rocket.chat/i/docker-compose.yml -O',
 };
+
+export const LoadingCode = Template.bind({});
+LoadingCode.args = {
+  children: '',
+  onClick: action('click'),
+};
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx
@@ -2,6 +2,7 @@ import React, { ComponentProps, ReactElement } from 'react';
 
 import { Box } from '../Box';
 import { Button } from '../Button';
+import { Skeleton } from '../Skeleton';
 
 type CodeSnippetProps = ComponentProps<typeof Box> & {
   children: string;
@@ -14,19 +15,29 @@ const CodeSnippet = ({
   onClick,
   buttonText = 'Copy',
   ...props
-}: CodeSnippetProps): ReactElement<CodeSnippetProps> => (
-  <Box is='pre' rcx-code-snippet {...props}>
-    <Box rcx-code-snippet__codebox>
-      <code>{children}</code>
-    </Box>
-    {onClick && (
-      <Box>
-        <Button small primary onClick={onClick}>
-          {buttonText}
-        </Button>
+}: CodeSnippetProps): ReactElement<CodeSnippetProps> => {
+  if (!children) {
+    return (
+      <Box is='pre' rcx-code-snippet {...props}>
+        <Skeleton w='100%' />
+      </Box>
+    );
+  }
+
+  return (
+    <Box is='pre' rcx-code-snippet {...props}>
+      <Box rcx-code-snippet__codebox>
+        <code>{children}</code>
       </Box>
-    )}
-  </Box>
-);
+      {onClick && children && (
+        <Box>
+          <Button small primary onClick={onClick}>
+            {buttonText}
+          </Button>
+        </Box>
+      )}
+    </Box>
+  );
+};
 
 export default CodeSnippet;