Fix excessive icon refetch made by importing bookmarks (#496)

Signed-off-by: fyzanshaik <[email protected]>
Co-authored-by: Mahesh Sanikommmu <[email protected]>

2 files changed, 37 insertions, 18 deletions

diff --git a/apps/browser-extension/entrypoints/content/twitter.ts b/apps/browser-extension/entrypoints/content/twitter.ts
index 8e01e2db..bfcc44c0 100644
--- a/apps/browser-extension/entrypoints/content/twitter.ts
+++ b/apps/browser-extension/entrypoints/content/twitter.ts
@@ -120,27 +120,39 @@ export function updateTwitterImportUI(message: {
 	)
 	if (!importButton) return
 
-	const iconUrl = browser.runtime.getURL("/icon-16.png")
+	const existingImg = importButton.querySelector("img")
+	if (existingImg) {
+		existingImg.remove()
+		const iconUrl = browser.runtime.getURL("/icon-16.png")
+		importButton.style.backgroundImage = `url("${iconUrl}")`
+		importButton.style.backgroundRepeat = "no-repeat"
+		importButton.style.backgroundSize = "20px 20px"
+		importButton.style.backgroundPosition = "8px center"
+		importButton.style.padding = "10px 16px 10px 32px"
+	}
+
+	let textSpan = importButton.querySelector(
+		"#sm-import-text",
+	) as HTMLSpanElement
+	if (!textSpan) {
+		textSpan = document.createElement("span")
+		textSpan.id = "sm-import-text"
+		textSpan.style.cssText = "font-weight: 500; font-size: 14px;"
+		importButton.appendChild(textSpan)
+	}
 
 	if (message.type === MESSAGE_TYPES.IMPORT_UPDATE) {
-		importButton.innerHTML = `
-			<img src="${iconUrl}" width="20" height="20" alt="Save to Memory" style="border-radius: 4px;" />
-			<span style="font-weight: 500; font-size: 14px;">${message.importedMessage}</span>
-		`
+		textSpan.textContent = message.importedMessage || ""
 		importButton.style.cursor = "default"
 	}
 
 	if (message.type === MESSAGE_TYPES.IMPORT_DONE) {
-		importButton.innerHTML = `
-			<img src="${iconUrl}" width="20" height="20" alt="Save to Memory" style="border-radius: 4px;" />
-			<span style="font-weight: 500; font-size: 14px; color: #059669;">✓ Imported ${message.totalImported} tweets!</span>
-		`
+		textSpan.textContent = `✓ Imported ${message.totalImported} tweets!`
+		textSpan.style.color = "#059669"
 
 		setTimeout(() => {
-			importButton.innerHTML = `
-				<img src="${iconUrl}" width="20" height="20" alt="Save to Memory" style="border-radius: 4px;" />
-				<span style="font-weight: 500; font-size: 14px;">Import Bookmarks</span>
-			`
+			textSpan.textContent = "Import Bookmarks"
+			textSpan.style.color = ""
 			importButton.style.cursor = "pointer"
 		}, 3000)
 	}
diff --git a/apps/browser-extension/utils/ui-components.ts b/apps/browser-extension/utils/ui-components.ts
index 1f280c7e..3654f6f7 100644
--- a/apps/browser-extension/utils/ui-components.ts
+++ b/apps/browser-extension/utils/ui-components.ts
@@ -175,7 +175,7 @@ export function createTwitterImportButton(onClick: () => void): HTMLElement {
     color: black;
     border: none;
     border-radius: 50px;
-    padding: 10px 12px;
+    padding: 10px 16px 10px 32px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -185,10 +185,17 @@ export function createTwitterImportButton(onClick: () => void): HTMLElement {
   `
 
 	const iconUrl = browser.runtime.getURL("/icon-16.png")
-	button.innerHTML = `
-    <img src="${iconUrl}" width="20" height="20" alt="Save to Memory" style="border-radius: 4px;" />
-    <span style="font-weight: 500; font-size: 12px;">Import Bookmarks</span>
-  `
+
+	button.style.backgroundImage = `url("${iconUrl}")`
+	button.style.backgroundRepeat = "no-repeat"
+	button.style.backgroundSize = "20px 20px"
+	button.style.backgroundPosition = "8px center"
+
+	const textSpan = document.createElement("span")
+	textSpan.id = "sm-import-text"
+	textSpan.style.cssText = "font-weight: 500; font-size: 12px;"
+	textSpan.textContent = "Import Bookmarks"
+	button.appendChild(textSpan)
 
 	button.addEventListener("mouseenter", () => {
 		button.style.opacity = "0.8"