fix bookmarks empty state

src/components/atoms/Table.tsx

@@ -5,16 +5,18 @@ import styles from './Table.module.css'
 
 interface TableProps extends IDataTableProps {
   isLoading?: boolean
+  emptyMessage?: string
 }
 
-function Empty(): ReactElement {
-  return <div className={styles.empty}>No results found</div>
+function Empty({ message }: { message?: string }): ReactElement {
+  return <div className={styles.empty}>{message || 'No results found'}</div>
 }
 
 export default function Table({
   data,
   columns,
   isLoading,
+  emptyMessage,
   ...props
 }: TableProps): ReactElement {
   return (
@@ -25,7 +27,7 @@ export default function Table({
       noHeader
       pagination={data?.length >= 9}
       paginationPerPage={10}
-      noDataComponent={<Empty />}
+      noDataComponent={<Empty message={emptyMessage} />}
       progressPending={isLoading}
       progressComponent={<Loader />}
       {...props}

src/components/molecules/Bookmarks.module.css

@@ -8,9 +8,3 @@
   font-size: var(--font-size-base);
   color: var(--brand-black);
 }
-
-.empty {
-  font-size: var(--font-size-small);
-  color: var(--color-secondary);
-  font-style: italic;
-}

src/components/molecules/Bookmarks.tsx

@@ -62,10 +62,8 @@ export default function Bookmarks(): ReactElement {
   const [pinned, setPinned] = useState<DDO[]>()
   const [isLoading, setIsLoading] = useState<boolean>()
 
-  const noBookmarks = !bookmarks || !bookmarks.length
-
   useEffect(() => {
-    if (noBookmarks) return
+    if (!bookmarks || !bookmarks.length) return
 
     async function init() {
       setIsLoading(true)
@@ -77,11 +75,15 @@ export default function Bookmarks(): ReactElement {
       setIsLoading(false)
     }
     init()
-  }, [bookmarks, config.metadataCacheUri, noBookmarks])
+  }, [bookmarks, config.metadataCacheUri])
 
-  return noBookmarks ? (
-    <div className={styles.empty}>Your bookmarks will appear here.</div>
-  ) : (
-    <Table columns={columns} data={pinned} isLoading={isLoading} noTableHead />
+  return (
+    <Table
+      columns={columns}
+      data={pinned}
+      isLoading={isLoading}
+      emptyMessage="Your bookmarks will appear here."
+      noTableHead
+    />
   )
 }