Notion: add progress bar

plugins/notion/src/App.css

@@ -37,6 +37,10 @@ form {
     gap: 10px;
 }
 
+p a {
+    cursor: pointer;
+}
+
 .sticky-divider {
     position: sticky;
     top: 0;
@@ -249,6 +253,8 @@ select:not(:disabled) {
     height: 100%;
     padding: 0px 15px 15px 15px;
     gap: 15px;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .login-image {
@@ -296,7 +302,45 @@ select:not(:disabled) {
     width: 100%;
 }
 
+.actions a {
+    display: contents;
+}
+
 .action-button {
     flex: 1;
     width: 100%;
 }
+
+/* Progress State */
+
+.progress-bar-text {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    color: var(--framer-color-text-tertiary);
+}
+
+.progress-bar-percent {
+    font-weight: 600;
+    color: var(--framer-color-text);
+}
+
+.progress-bar {
+    height: 3px;
+    width: 100%;
+    flex-shrink: 0;
+    border-radius: 10px;
+    background-color: var(--framer-color-bg-tertiary);
+    position: relative;
+}
+
+.progress-bar-fill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 10px;
+    background-color: var(--framer-color-tint);
+}

plugins/notion/src/App.tsx

@@ -8,7 +8,7 @@ import { type DatabaseIdMap, type DataSource, getDataSource } from "./data"
 import { FieldMapping } from "./FieldMapping"
 import { NoTableAccess } from "./NoAccess"
 import { SelectDataSource } from "./SelectDataSource"
-import { showAccessErrorUI, showFieldMappingUI, showLoginUI } from "./ui"
+import { showAccessErrorUI, showFieldMappingUI, showLoginUI, showProgressUI } from "./ui"
 
 interface AppProps {
     collection: ManagedCollection
@@ -32,6 +32,7 @@ export function App({
     const [dataSource, setDataSource] = useState<DataSource | null>(null)
     const [isLoadingDataSource, setIsLoadingDataSource] = useState(Boolean(previousDatabaseId))
     const [hasAccessError, setHasAccessError] = useState(false)
+    const [isSyncing, setIsSyncing] = useState(false)
 
     // Support self-referencing databases by allowing the current collection to be referenced.
     const databaseIdMap = useMemo(() => {
@@ -46,6 +47,8 @@ export function App({
             try {
                 if (hasAccessError) {
                     await showAccessErrorUI()
+                } else if (isSyncing) {
+                    await showProgressUI()
                 } else if (dataSource || isLoadingDataSource) {
                     await showFieldMappingUI()
                 } else {
@@ -60,7 +63,7 @@ export function App({
         }
 
         void showUI()
-    }, [dataSource, isLoadingDataSource, hasAccessError])
+    }, [dataSource, isLoadingDataSource, hasAccessError, isSyncing])
 
     useEffect(() => {
         if (!previousDatabaseId) {
@@ -149,6 +152,7 @@ export function App({
             previousLastSynced={previousLastSynced}
             previousIgnoredFieldIds={previousIgnoredFieldIds}
             databaseIdMap={databaseIdMap}
+            setIsSyncing={setIsSyncing}
         />
     )
 }

plugins/notion/src/FieldMapping.tsx

@@ -23,6 +23,7 @@ import {
     type SyncProgress,
     syncCollection,
 } from "./data"
+import { Progress } from "./Progress"
 import { assert, syncMethods } from "./utils"
 
 const labelByFieldTypeOption: Record<ManagedCollectionField["type"], string> = {
@@ -144,6 +145,7 @@ interface FieldMappingProps {
     previousLastSynced: string | null
     previousIgnoredFieldIds: string | null
     databaseIdMap: DatabaseIdMap
+    setIsSyncing: (isSyncing: boolean) => void
 }
 
 export function FieldMapping({
@@ -153,6 +155,7 @@ export function FieldMapping({
     previousLastSynced,
     previousIgnoredFieldIds,
     databaseIdMap,
+    setIsSyncing,
 }: FieldMappingProps) {
     const isAllowedToManage = useIsAllowedTo("ManagedCollection.setFields", ...syncMethods)
 
@@ -250,6 +253,7 @@ export function FieldMapping({
         const task = async () => {
             try {
                 setStatus("syncing-collection")
+                setIsSyncing(true)
                 setSyncProgress(null)
                 await framer.setCloseWarning("Synchronization in progress. Closing will cancel the sync.")
 
@@ -286,6 +290,7 @@ export function FieldMapping({
             } finally {
                 await framer.setCloseWarning(false)
                 setStatus("mapping-fields")
+                setIsSyncing(false)
                 setSyncProgress(null)
             }
         }
@@ -301,7 +306,9 @@ export function FieldMapping({
         )
     }
 
-    const progressPercent = syncProgress ? ((syncProgress.current / syncProgress.total) * 100).toFixed(1) : null
+    if (isSyncing) {
+        return <Progress current={syncProgress?.current ?? 0} total={syncProgress?.total ?? 0} />
+    }
 
     return (
         <main className="framer-hide-scrollbar mapping">
@@ -352,15 +359,11 @@ export function FieldMapping({
                 <footer>
                     <hr className="sticky-top" />
                     <button
-                        disabled={isSyncing || !isAllowedToManage}
+                        disabled={!isAllowedToManage}
                         tabIndex={0}
                         title={!isAllowedToManage ? "Insufficient permissions" : undefined}
                     >
-                        {isSyncing ? (
-                            <>{!syncProgress ? <div className="framer-spinner" /> : <span>{progressPercent}%</span>}</>
-                        ) : (
-                            <span>Import from {dataSourceName.trim() ? dataSourceName : "Untitled"}</span>
-                        )}
+                        <span>Import from {dataSourceName.trim() ? dataSourceName : "Untitled"}</span>
                     </button>
                 </footer>
             </form>

plugins/notion/src/Progress.tsx

@@ -0,0 +1,23 @@
+export function Progress({ current, total }: { current: number; total: number }) {
+    const progressPercent = total > 0 ? ((current / total) * 100).toFixed(1).replace(".0", "") : "0"
+    const formatter = new Intl.NumberFormat("en-US")
+    const formattedCurrent = formatter.format(current)
+    const formattedTotal = formatter.format(total)
+
+    return (
+        <main>
+            <div className="progress-bar-text">
+                <span className="progress-bar-percent">{progressPercent}%</span>
+                <span>
+                    {formattedCurrent} / {formattedTotal}
+                </span>
+            </div>
+            <div className="progress-bar">
+                <div className="progress-bar-fill" style={{ width: `${progressPercent}%` }} />
+            </div>
+            <p>
+                {current > 0 ? "Syncing" : "Loading data"}… please keep the plugin open until the process is complete.
+            </p>
+        </main>
+    )
+}

plugins/notion/src/ProgressApp.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react"
+import { type SyncProgress } from "./data"
+import { Progress } from "./Progress"
+import { showProgressUI } from "./ui"
+
+interface ProgressAppProps {
+    onProgressReady: (setProgress: (progress: SyncProgress) => void) => void
+}
+
+export function ProgressApp({ onProgressReady }: ProgressAppProps) {
+    const [progress, setProgress] = useState<SyncProgress>({ current: 0, total: 0 })
+
+    useEffect(() => {
+        void showProgressUI()
+    }, [])
+
+    useEffect(() => {
+        onProgressReady(setProgress)
+    }, [onProgressReady])
+
+    return <Progress current={progress.current} total={progress.total} />
+}

plugins/notion/src/api.ts

@@ -394,15 +394,28 @@ export async function getPageBlocksAsRichText(pageId: string) {
     return blocksToHtml(blocks)
 }
 
-export async function getDatabaseItems(database: GetDatabaseResponse): Promise<PageObjectResponse[]> {
+export async function getDatabaseItems(
+    database: GetDatabaseResponse,
+    onProgress?: (progress: { current: number; total: number }) => void
+): Promise<PageObjectResponse[]> {
     const notion = getNotionClient()
 
-    const data = await collectPaginatedAPI(notion.databases.query, {
+    const data: PageObjectResponse[] = []
+    let itemCount = 0
+
+    const databaseIterator = iteratePaginatedAPI(notion.databases.query, {
         database_id: database.id,
     })
-    assert(data.every(isFullPage), "Response is not a full page")
 
-    return data
+    for await (const item of databaseIterator) {
+        data.push(item as PageObjectResponse)
+        itemCount++
+        onProgress?.({ current: 0, total: itemCount })
+    }
+
+    const pages = data.filter(isFullPage)
+
+    return pages
 }
 
 export function isUnchangedSinceLastSync(lastEditedTime: string, lastSyncedTime: string | null): boolean {

plugins/notion/src/data.ts

@@ -127,7 +127,7 @@ export async function syncCollection(
 
     const seenItemIds = new Set<string>()
 
-    const databaseItems = await getDatabaseItems(dataSource.database)
+    const databaseItems = await getDatabaseItems(dataSource.database, onProgress)
     const limit = pLimit(CONCURRENCY_LIMIT)
 
     // Progress tracking
@@ -341,17 +341,36 @@ export function parseIgnoredFieldIds(ignoredFieldIdsStringified: string | null):
         : new Set<string>()
 }
 
+export function shouldSyncExistingCollection({
+    previousSlugFieldId,
+    previousDatabaseId,
+}: {
+    previousSlugFieldId: string | null
+    previousDatabaseId: string | null
+}): boolean {
+    const isAllowedToSync = framer.isAllowedTo(...syncMethods)
+    if (framer.mode !== "syncManagedCollection" || !previousSlugFieldId || !previousDatabaseId || !isAllowedToSync) {
+        return false
+    }
+
+    return true
+}
+
 export async function syncExistingCollection(
     collection: ManagedCollection,
     previousDatabaseId: string | null,
     previousSlugFieldId: string | null,
     previousIgnoredFieldIds: string | null,
     previousLastSynced: string | null,
     previousDatabaseName: string | null,
-    databaseIdMap: DatabaseIdMap
+    databaseIdMap: DatabaseIdMap,
+    onProgress?: (progress: SyncProgress) => void
 ): Promise<{ didSync: boolean }> {
-    const isAllowedToSync = framer.isAllowedTo(...syncMethods)
-    if (framer.mode !== "syncManagedCollection" || !previousSlugFieldId || !previousDatabaseId || !isAllowedToSync) {
+    if (
+        !shouldSyncExistingCollection({ previousSlugFieldId, previousDatabaseId }) ||
+        !previousSlugFieldId ||
+        !previousDatabaseId
+    ) {
         return { didSync: false }
     }
 
@@ -387,7 +406,8 @@ export async function syncExistingCollection(
             slugField,
             ignoredFieldIds,
             previousLastSynced,
-            existingFields
+            existingFields,
+            onProgress
         )
         return { didSync: true }
     } catch (error) {

plugins/notion/src/main.tsx

@@ -4,11 +4,17 @@ import { framer } from "framer-plugin"
 import React from "react"
 import ReactDOM from "react-dom/client"
 
-import { App } from "./App.tsx"
+import { App } from "./App"
 import { PLUGIN_KEYS } from "./api"
 import auth from "./auth"
-import { getExistingCollectionDatabaseIdMap, syncExistingCollection } from "./data"
-import { Authenticate } from "./Login.tsx"
+import {
+    getExistingCollectionDatabaseIdMap,
+    type SyncProgress,
+    shouldSyncExistingCollection,
+    syncExistingCollection,
+} from "./data"
+import { Authenticate } from "./Login"
+import { ProgressApp } from "./ProgressApp"
 
 const activeCollection = await framer.getActiveManagedCollection()
 
@@ -47,15 +53,40 @@ const [
     getExistingCollectionDatabaseIdMap(),
 ])
 
-const { didSync } = await syncExistingCollection(
-    activeCollection,
-    previousDatabaseId,
-    previousSlugFieldId,
-    previousIgnoredFieldIds,
-    previousLastSynced,
-    previousDatabaseName,
-    existingCollectionDatabaseIdMap
-)
+const shouldSync = shouldSyncExistingCollection({ previousSlugFieldId, previousDatabaseId })
+
+let didSync = false
+
+if (shouldSync) {
+    // Render progress UI component
+    const reactRoot = ReactDOM.createRoot(root)
+
+    const setSyncProgress = await new Promise<(progress: SyncProgress) => void>(resolve => {
+        reactRoot.render(
+            <React.StrictMode>
+                <ProgressApp
+                    onProgressReady={(setter: (progress: SyncProgress) => void) => {
+                        resolve(setter)
+                    }}
+                />
+            </React.StrictMode>
+        )
+    })
+
+    const { didSync: didSyncResult } = await syncExistingCollection(
+        activeCollection,
+        previousDatabaseId,
+        previousSlugFieldId,
+        previousIgnoredFieldIds,
+        previousLastSynced,
+        previousDatabaseName,
+        existingCollectionDatabaseIdMap,
+        setSyncProgress
+    )
+
+    didSync = didSyncResult
+    reactRoot.unmount()
+}
 
 if (didSync) {
     framer.closePlugin("Synchronization successful", {