refs #5 Trying React.lazy

vocdoni · May 16, 2023 · bdcf846 · bdcf846
1 parent f12f875
commit bdcf846
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 53 deletions.
diff --git a/packages/chakra-components/src/components/Election/Description.tsx b/packages/chakra-components/src/components/Election/Description.tsx
@@ -1,10 +1,9 @@
 import { ChakraProps, useStyleConfig } from '@chakra-ui/system'
-import { ReactMarkdownProps } from 'react-markdown/lib/complex-types'
 
-import { Markdown } from '../layout'
+import { Markdown, MarkdownProps } from '../layout'
 import { useElection } from './Election'
 
-export const ElectionDescription = (props: Omit<ReactMarkdownProps, 'children' | 'node'> & ChakraProps) => {
+export const ElectionDescription = (props: Omit<MarkdownProps, 'children' | 'node'> & ChakraProps) => {
   const styles = useStyleConfig('ElectionDescription', props)
   const { election } = useElection()
 

diff --git a/packages/chakra-components/src/components/layout/Markdown.tsx b/packages/chakra-components/src/components/layout/Markdown.tsx
@@ -1,61 +1,25 @@
-import { Box, Code, Heading, Link, ListItem, OrderedList, Text, UnorderedList } from '@chakra-ui/layout'
 import { chakra } from '@chakra-ui/system'
-import { Table, Tr } from '@chakra-ui/table'
-import ReactMarkdown, { Options } from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { PropsWithChildren, Suspense, lazy } from 'react'
+import { Options } from 'react-markdown'
 
-type MarkdownProps = Options & {
-  children?: string
-}
+const MarkdownRenderer = lazy(() => import('./MarkdownRenderer'))
+
+export type MarkdownProps = Options &
+  PropsWithChildren<{
+    plain?: boolean
+  }>
 
-const MD = ({ children, ...rest }: MarkdownProps) => {
+const MD = ({ children, plain, ...rest }: MarkdownProps) => {
   if (!children) {
     return null
   }
 
+  if (plain) return <>{children}</>
+
   return (
-    <ReactMarkdown
-      children={children}
-      remarkPlugins={[remarkGfm]}
-      components={{
-        a: ({ node, children, ...props }) => (
-          <Link {...props} target='_blank'>
-            {children}
-          </Link>
-        ),
-        h1: ({ node, children, ...props }) => (
-          <Heading size='lg' mt={5} mb={4} {...props}>
-            {children}
-          </Heading>
-        ),
-        h2: ({ node, children, ...props }) => (
-          <Heading size='md' mt={5} mb={4} {...props}>
-            {children}
-          </Heading>
-        ),
-        h3: ({ node, children, ...props }) => (
-          <Heading as='h3' size='sm' mt={5} mb={4} {...props}>
-            {children}
-          </Heading>
-        ),
-        ol: ({ node, children, ...props }) => <OrderedList {...props}>{children}</OrderedList>,
-        ul: ({ node, children, ...props }) => <UnorderedList {...props}>{children}</UnorderedList>,
-        li: ({ node, children, ...props }) => <ListItem {...props}>{children}</ListItem>,
-        p: ({ node, children, ...props }) => (
-          <Text fontWeight='medium' mb={4}>
-            {children}
-          </Text>
-        ),
-        table: ({ node, children, ...props }) => (
-          <Box overflowX='auto' maxW='full'>
-            <Table {...props}>{children}</Table>
-          </Box>
-        ),
-        tr: ({ node, children, ...props }) => <Tr {...props}>{children}</Tr>,
-        code: ({ node, children, ...props }) => <Code {...props}>{children}</Code>,
-      }}
-      {...rest}
-    />
+    <Suspense fallback={<>Burriloadin</>}>
+      <MarkdownRenderer {...rest}>{children}</MarkdownRenderer>
+    </Suspense>
   )
 }
 

diff --git a/packages/chakra-components/src/components/layout/MarkdownRenderer.tsx b/packages/chakra-components/src/components/layout/MarkdownRenderer.tsx
@@ -0,0 +1,64 @@
+import { Box, Code, Heading, Link, ListItem, OrderedList, Text, UnorderedList } from '@chakra-ui/layout'
+import { chakra } from '@chakra-ui/system'
+import { Table, Tr } from '@chakra-ui/table'
+import type { PropsWithChildren } from 'react'
+import ReactMarkdown, { Options } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+type MarkdownRenderer = PropsWithChildren<Options>
+
+const MDR = ({ children, ...rest }: MarkdownRenderer) => {
+  if (!children) {
+    return null
+  }
+
+  return (
+    <ReactMarkdown
+      children={children}
+      remarkPlugins={[remarkGfm]}
+      components={{
+        a: ({ node, children, ...props }) => (
+          <Link {...props} target='_blank'>
+            {children}
+          </Link>
+        ),
+        h1: ({ node, children, ...props }) => (
+          <Heading size='lg' mt={5} mb={4} {...props}>
+            {children}
+          </Heading>
+        ),
+        h2: ({ node, children, ...props }) => (
+          <Heading size='md' mt={5} mb={4} {...props}>
+            {children}
+          </Heading>
+        ),
+        h3: ({ node, children, ...props }) => (
+          <Heading as='h3' size='sm' mt={5} mb={4} {...props}>
+            {children}
+          </Heading>
+        ),
+        ol: ({ node, children, ...props }) => <OrderedList {...props}>{children}</OrderedList>,
+        ul: ({ node, children, ...props }) => <UnorderedList {...props}>{children}</UnorderedList>,
+        li: ({ node, children, ...props }) => <ListItem {...props}>{children}</ListItem>,
+        p: ({ node, children, ...props }) => (
+          <Text fontWeight='medium' mb={4}>
+            {children}
+          </Text>
+        ),
+        table: ({ node, children, ...props }) => (
+          <Box overflowX='auto' maxW='full'>
+            <Table {...props}>{children}</Table>
+          </Box>
+        ),
+        tr: ({ node, children, ...props }) => <Tr {...props}>{children}</Tr>,
+        code: ({ node, children, ...props }) => <Code {...props}>{children}</Code>,
+      }}
+      {...rest}
+    />
+  )
+}
+
+const MarkdownRenderer = chakra(MDR)
+MarkdownRenderer.displayName = 'MarkdownRenderer'
+
+export default MarkdownRenderer