feat: loading bar

Author: L-a-r-t

src/api/saveChat.ts

@@ -15,7 +15,10 @@ import type { SaveBehavior, StoredDatabase } from "~utils/types"
 import type { parseSave } from "./parseSave"
 
 // save new page to notion database
-export const saveChat = async (params: SaveChatParams) => {
+export const saveChat = async (
+  params: SaveChatParams,
+  callback: (saved: number) => void = () => {}
+) => {
   try {
     const notion = await getNotion()
     let {
@@ -64,34 +67,36 @@ export const saveChat = async (params: SaveChatParams) => {
             url: "https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg"
           }
         },
-        properties: tag ? {
-          [propertiesIds.title]: {
-            title: [
-              {
-                text: {
-                  content: title
-                }
+        properties: tag
+          ? {
+              [propertiesIds.title]: {
+                title: [
+                  {
+                    text: {
+                      content: title
+                    }
+                  }
+                ]
+              },
+              [propertiesIds.url]: {
+                url
+              },
+              [tags[tagPropertyIndex].id]: tag
+            }
+          : {
+              [propertiesIds.title]: {
+                title: [
+                  {
+                    text: {
+                      content: title
+                    }
+                  }
+                ]
+              },
+              [propertiesIds.url]: {
+                url
               }
-            ]
-          },
-          [propertiesIds.url]: {
-            url
-          },
-          [tags[tagPropertyIndex].id]: tag
-        } : {
-          [propertiesIds.title]: {
-            title: [
-              {
-                text: {
-                  content: title
-                }
-              }
-            ]
-          },
-          [propertiesIds.url]: {
-            url
-          }
-        },
+            },
         children: generateHeadings
           ? [table_of_contents, ...chunks[0]]
           : [...chunks[0]]

src/background/functions/save.ts

@@ -64,13 +64,25 @@ const save = async (
       isMarkdown: true
     })
 
-    await storage.set(STORAGE_KEYS.saveStatus, "saving" as SaveStatus)
-    const res = await saveChat({
-      ...parsedReq,
-      conflictingPageId: conflictingPageId,
-      generateHeadings,
-      saveBehavior
-    })
+    console.log("Chunks to save:", parsedReq.chunks.length)
+
+    await storage.set(
+      STORAGE_KEYS.saveStatus,
+      `saving:${0}:${parsedReq.chunks.length}` as SaveStatus
+    )
+    const res = await saveChat(
+      {
+        ...parsedReq,
+        conflictingPageId: conflictingPageId,
+        generateHeadings,
+        saveBehavior
+      },
+      (saved) =>
+        storage.set(
+          STORAGE_KEYS.saveStatus,
+          `saving:${saved}:${parsedReq.chunks.length}` as SaveStatus
+        )
+    )
 
     await storage.set(STORAGE_KEYS.saveStatus, "saved" as SaveStatus)
     if (openInNotion && !autoSave) {

src/contents/popup.tsx

@@ -5,6 +5,7 @@ import { useState } from "react"
 
 import { useStorage } from "@plasmohq/storage/hook"
 
+import useSavePercentage from "~hooks/useSavePercentage"
 import ErrorPopup from "~popup/ErrorPopup"
 import SavePopup from "~popup/SavePopup"
 import SettingsPopup from "~popup/SettingsPopup"
@@ -36,6 +37,8 @@ const Wrapper = () => {
   )
   const [toBeSaved, setToBeSaved] = useStorage(STORAGE_KEYS.toBeSaved)
 
+  const savePercent = useSavePercentage(saveStatus)
+
   const hidePopup = async () => {
     await setShowPopup(false)
     await setSaveStatus(null)
@@ -77,7 +80,8 @@ const Wrapper = () => {
             <img src={illustration} alt="ChatGPT to Notion" />
             <p className="font-semibold">
               {saveStatus === "fetching" && "Fetching conversation..."}
-              {saveStatus === "saving" && "Saving..."}
+              {saveStatus.includes("saving") &&
+                "Saving... " + String(savePercent) + "%"}
               {saveStatus === "saved" && "Saved successfully!"}
             </p>
           </div>

src/hooks/useSavePercentage.ts

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+
+import type { SaveStatus } from "~utils/types"
+
+export default function useSavePercentage(
+  saveStatus: SaveStatus,
+  duration: number = 7000
+) {
+  const [start, end] = useMemo(() => {
+    if (saveStatus && saveStatus.startsWith("saving:")) {
+      const [_, saved, total] = saveStatus.split(":")
+      return [
+        Math.round((parseInt(saved) / parseInt(total)) * 100),
+        Math.min(Math.round((parseInt(saved + 1) / parseInt(total)) * 100), 90)
+      ]
+    }
+    return [0, 0]
+  }, [saveStatus])
+
+  const [percentage, setPercentage] = useState(start)
+
+  useEffect(() => {
+    if (start < end) {
+      const range = end - start
+      const increment = range / (duration / 100)
+      let currentPercentage = start
+
+      const intervalId = setInterval(() => {
+        currentPercentage += increment
+        if (currentPercentage >= end) {
+          currentPercentage = end
+          clearInterval(intervalId)
+        }
+        setPercentage((_) => Math.round(currentPercentage))
+      }, 100)
+
+      return () => clearInterval(intervalId)
+    }
+  }, [start, end, duration])
+
+  return percentage
+}

src/popup/IndexPopup.tsx

@@ -26,6 +26,8 @@ import NoTagButton from "~common/components/NoTagButton"
 import Spinner from "~common/components/Spinner"
 import LogoIcon from "~common/logo"
 import StarIcon from "~common/star"
+import usePercentageAnimation from "~hooks/useSavePercentage"
+import useSavePercentage from "~hooks/useSavePercentage"
 import useTags from "~hooks/useTags"
 import { STORAGE_KEYS } from "~utils/consts"
 import {
@@ -76,6 +78,8 @@ function IndexPopup() {
     string | undefined
   >()
 
+  const savePercent = useSavePercentage(saveStatus, 5000)
+
   useEffect(() => {
     chrome.runtime
       .sendMessage({ type: "chatgpt-to-notion_getCurrentTab" })
@@ -96,7 +100,7 @@ function IndexPopup() {
   }, [chatID])
 
   useEffect(() => {
-    setLoading(saveStatus == "fetching" || saveStatus == "saving")
+    setLoading(saveStatus == "fetching" || !!saveStatus?.includes("saving"))
   }, [saveStatus])
 
   const handleSave = async (autosave?: boolean) => {
@@ -339,6 +343,17 @@ function IndexPopup() {
         )}
         {loading && <Spinner white small />}
       </button>
+      {loading && (
+        <div className="flex items-center gap-4">
+          <div className="flex-grow h-2 rounded-full bg-neutral-300">
+            <div
+              style={{ width: String(savePercent) + "%" }}
+              className="h-full rounded-full bg-black"
+            />
+          </div>
+          <p className="text-sm font-bold mt-1">{savePercent}%</p>
+        </div>
+      )}
       {!success && !error && !loading && (
         <>
           <div className="mt-1">

src/popup/SavePopup.tsx

@@ -9,6 +9,7 @@ import type {
   Error,
   PopupEnum,
   SaveBehavior,
+  SaveStatus,
   StoredDatabase,
   ToBeSaved
 } from "~utils/types"
@@ -20,6 +21,7 @@ import { parseSave } from "~api/parseSave"
 import DropdownPopup from "~common/components/Dropdown"
 import NoTagButton from "~common/components/NoTagButton"
 import Spinner from "~common/components/Spinner"
+import useSavePercentage from "~hooks/useSavePercentage"
 import useTags from "~hooks/useTags"
 import { STORAGE_KEYS } from "~utils/consts"
 import { getConsiseErrMessage, i18n } from "~utils/functions"
@@ -72,6 +74,9 @@ export default function SavePopup() {
     string | undefined
   >()
 
+  const [saveStatus] = useStorage<SaveStatus>(STORAGE_KEYS.saveStatus)
+  const savePercent = useSavePercentage(saveStatus, 3000)
+
   useEffect(() => {
     chrome.runtime
       .sendMessage({ type: "chatgpt-to-notion_getCurrentTab" })
@@ -375,6 +380,17 @@ export default function SavePopup() {
           {i18n("about_FAQ")}
         </a>
       )}
+      {loading && (
+        <div className="flex items-center gap-4">
+          <div className="flex-grow h-2 rounded-full bg-neutral-300">
+            <div
+              style={{ width: String(savePercent) + "%" }}
+              className="h-full rounded-full bg-black"
+            />
+          </div>
+          <p className="text-sm font-bold mt-1">{savePercent}%</p>
+        </div>
+      )}
     </>
   )
 }

src/utils/functions/index.ts

@@ -4,7 +4,13 @@ import { markdownToBlocks } from "@tryfabric/martian"
 import { Storage } from "@plasmohq/storage"
 
 import nhm from "~config/html-markdown"
-import type { ChatConfig, Conversation, Error, Message } from "~utils/types"
+import type {
+  ChatConfig,
+  Conversation,
+  Error,
+  Message,
+  SaveStatus
+} from "~utils/types"
 
 import { generateCallout, generateToggle } from "./notion"
 

src/utils/types/index.ts

@@ -64,7 +64,7 @@ export type AutosaveStatus =
   | "error"
   | "disabled"
 
-export type SaveStatus = "saving" | "saved" | "error" | "fetching" | null
+export type SaveStatus = `saving:${number}:${number}` | "saved" | "error" | "fetching" | null
 
 // ChatGPT conversation as returned by the API
 // We won't type more than we need obviously