Improve nreact perf

packages/nreact/src/block.tsx

@@ -179,7 +179,7 @@ export const Block: React.FC<BlockProps> = props => {
                       ${page_full_width && 'notion-full-width'}
                       ${page_small_text && 'notion-small-text'}
                       ${bodyClassName}`}>
-                    {page_icon && <PageIcon block={block} defaultIcon={defaultPageIcon} inline={false} />}
+                    {page_icon && <PageIcon block={block} defaultIcon={defaultPageIcon} inline={false} priority={true} />}
 
                     {pageHeader}
 

packages/nreact/src/components/google-drive.tsx

@@ -29,6 +29,7 @@ export const GoogleDrive: React.FC<{
             src={mapImageUrl(properties.thumbnail, block)}
             alt={properties.title || 'Google Drive Document'}
             loading='lazy'
+            fetchPriority='low'
           />
         </div>
 

packages/nreact/src/components/lazy-image.tsx

@@ -53,6 +53,7 @@ export const LazyImage: React.FC<{
         blurDataURL={previewImage.dataURIBase64}
         placeholder='blur'
         priority={priority}
+        fetchPriority={priority ? 'high' : undefined}
         onLoad={onLoad}
       />
     )
@@ -81,6 +82,7 @@ export const LazyImage: React.FC<{
           width={null}
           height={height || null}
           priority={priority}
+          fetchPriority={priority ? 'high' : undefined}
           onLoad={onLoad}
         />
       )
@@ -93,7 +95,8 @@ export const LazyImage: React.FC<{
         src={src}
         alt={alt}
         ref={attachZoomRef}
-        loading='lazy'
+        loading={priority ? 'eager' : 'lazy'}
+        fetchPriority={priority ? 'high' : undefined}
         decoding='async'
         {...rest}
       />

packages/nreact/src/components/lite-youtube-embed.tsx

@@ -86,7 +86,13 @@ export const LiteYouTubeEmbed: React.FC<{
           ${iframeInitialized && 'notion-yt-initialized'}
           ${className || ''}`}
         style={style}>
-        <img src={posterUrl} className='notion-yt-thumbnail' loading={lazyImage ? 'lazy' : undefined} alt={alt} />
+        <img
+          src={posterUrl}
+          className='notion-yt-thumbnail'
+          loading={lazyImage ? 'lazy' : 'eager'}
+          fetchPriority={lazyImage ? 'low' : 'high'}
+          alt={alt}
+        />
 
         <div className='notion-yt-playbtn' />
 

packages/nreact/src/components/page-icon.tsx

@@ -23,7 +23,8 @@ export const PageIconImpl: React.FC<{
   inline?: boolean
   hideDefaultIcon?: boolean
   defaultIcon?: string
-}> = ({ block, className, inline = true, hideDefaultIcon = false, defaultIcon }) => {
+  priority?: boolean
+}> = ({ block, className, inline = true, hideDefaultIcon = false, defaultIcon, priority = false }) => {
   const { mapImageUrl, recordMap, darkMode } = useNotionContext()
   let isImage = false
   let content: React.ReactNode = null
@@ -36,11 +37,25 @@ export const PageIconImpl: React.FC<{
       const url = mapImageUrl(icon, block)
       isImage = true
 
-      content = <LazyImage src={url} alt={title || 'page icon'} className={`${className || ''} notion-page-icon`} />
+      content = (
+        <LazyImage
+          src={url}
+          alt={title || 'page icon'}
+          className={`${className || ''} notion-page-icon`}
+          priority={priority}
+        />
+      )
     } else if (icon && icon.startsWith('/icons/')) {
       const url = 'https://www.notion.so' + icon + '?mode=' + (darkMode ? 'dark' : 'light')
 
-      content = <LazyImage src={url} alt={title || 'page icon'} className={`${className || ''} notion-page-icon`} />
+      content = (
+        <LazyImage
+          src={url}
+          alt={title || 'page icon'}
+          className={`${className || ''} notion-page-icon`}
+          priority={priority}
+        />
+      )
     } else if (!icon) {
       if (!hideDefaultIcon) {
         isImage = true

packages/nreact/src/components/text.tsx

@@ -75,6 +75,8 @@ export const Text: React.FC<{
                           src={mapImageUrl(user.profile_photo, block)}
                           alt={name}
                           style={{ display: 'inline', marginRight: '0.3em', marginBottom: '0.3em' }}
+                          loading='lazy'
+                          fetchPriority='low'
                         />
                         {name}
                       </components.Link>
@@ -187,6 +189,8 @@ export const Text: React.FC<{
                       src={mapImageUrl(user.profile_photo, block)}
                       alt={name}
                       style={{ display: 'inline', marginRight: '0.3em', marginBottom: '0.3em' }}
+                      loading='lazy'
+                      fetchPriority='low'
                     />
                     {name}
                   </components.Link>

packages/nreact/src/index.tsx

@@ -21,5 +21,6 @@ export * from './components/asset-wrapper'
 export * from './components/sync-pointer-block'
 export * from './components/graceful-image'
 export * from './components/google-drive'
+export * from './components/lazy-image'
 export * from './icons/property-icon'
 export * from './third-party/collection-column-title'

packages/nreact/src/lazy-image.test.tsx

@@ -0,0 +1,21 @@
+import { test, expect } from 'vitest'
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+import { NotionContextProvider } from './context'
+import { LazyImage } from './components/lazy-image'
+
+const render = (jsx: React.ReactElement) =>
+  ReactDOMServer.renderToStaticMarkup(<NotionContextProvider>{jsx}</NotionContextProvider>)
+
+test('LazyImage uses eager loading when priority', () => {
+  const html = render(<LazyImage src='test.png' alt='t' priority />)
+  expect(html).toContain('loading="eager"')
+  expect(html).toContain('fetchPriority="high"')
+})
+
+test('LazyImage defaults to lazy loading', () => {
+  const html = render(<LazyImage src='test.png' alt='t' />)
+  expect(html).toContain('loading="lazy"')
+  expect(html).not.toContain('fetchPriority="high"')
+})

packages/nreact/src/page-icon.test.tsx

@@ -0,0 +1,31 @@
+import { test, expect } from 'vitest'
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+import { NotionContextProvider } from './context'
+import { PageIconImpl } from './components/page-icon'
+
+const block: any = {
+  id: '1',
+  type: 'page',
+  parent_id: '1',
+  parent_table: 'block',
+  version: 0,
+  created_time: 0,
+  last_edited_time: 0,
+  alive: true,
+  created_by_table: 'notion_user',
+  created_by_id: '1',
+  last_edited_by_table: 'notion_user',
+  last_edited_by_id: '1',
+  properties: { title: [['Title']] },
+  format: { page_icon: 'https://example.com/icon.png' }
+}
+
+const render = (jsx: React.ReactElement) =>
+  ReactDOMServer.renderToStaticMarkup(<NotionContextProvider>{jsx}</NotionContextProvider>)
+
+test('PageIcon forwards priority to LazyImage', () => {
+  const html = render(<PageIconImpl block={block} priority />)
+  expect(html).toContain('fetchPriority="high"')
+})

packages/nreact/tsup.config.ts

@@ -10,7 +10,7 @@ const baseConfig: Options = {
     'src/third-party/pdf.tsx'
   ],
   outDir: 'build',
-  target: 'es2015',
+  target: 'es2020',
   platform: 'browser',
   format: ['esm'],
   splitting: true,
@@ -28,7 +28,7 @@ export default defineConfig([
   {
     ...baseConfig,
     outDir: 'build',
-    minify: false,
+    minify: true,
     sourcemap: false
   }
 ])