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

Signed-off-by: fyzanshaik <fyzan.shaik@gmail.com>
Co-authored-by: Mahesh Sanikommmu <mahesh.svmr@gmail.com>
This commit is contained in:
Faizan Shaik 2025-11-11 00:53:40 +05:30 committed by GitHub
parent 428ba82dac
commit 5ec3719604
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 37 additions and 18 deletions

View file

@ -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)
}

View file

@ -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"