diff --git a/package.json b/package.json index 2f6967da..65d8a0b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.20.85", + "version": "0.20.86", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index f0ed0085..a1e39022 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1227,14 +1227,6 @@ input[type="color"]::-moz-color-swatch { border-radius: 5px; } -.avatar-placeholder { - width: var(--avatar-size-post); - height: var(--avatar-size-post); - border-radius: var(--avatar-border-radius); - border: var(--hair) solid var(--post-border-color); - background-color: var(--image-placeholder-color); -} - header { z-index: var(--header-z-index); background-color: var(--background-color); @@ -1479,8 +1471,7 @@ tab-bar:not([full-width]) { padding-bottom: 0 !important; } - .sidebar .sidebar-profile-avatar .avatar-image-frame, - .sidebar .sidebar-profile-avatar .avatar-placeholder { + .sidebar .sidebar-profile-avatar .avatar-image-frame { width: var(--avatar-size-sidebar-compact); height: var(--avatar-size-sidebar-compact); } @@ -1560,8 +1551,7 @@ tab-bar:not([full-width]) { } } -.sidebar-profile-avatar .avatar-image-frame, -.sidebar-profile-avatar .avatar-placeholder { +.sidebar-profile-avatar .avatar-image-frame { width: var(--avatar-size-sidebar); height: var(--avatar-size-sidebar); } @@ -1906,11 +1896,6 @@ button.sidebar-plugin-nav-item { height: var(--avatar-size-footer-nav); } -.footer-nav-item .avatar-placeholder { - width: var(--avatar-size-footer-nav); - height: var(--avatar-size-footer-nav); -} - .footer-nav-item[disabled] { pointer-events: none; cursor: default; @@ -4039,8 +4024,7 @@ image-carousel { flex-shrink: 0; } -.convo-avatar .avatar-image-frame, -.convo-avatar .avatar-placeholder { +.convo-avatar .avatar-image-frame { width: var(--avatar-size-convo); height: var(--avatar-size-convo); } @@ -4051,7 +4035,9 @@ image-carousel { height: var(--avatar-size-convo); } -.avatar-group > .avatar-placeholder { +.avatar-group > .avatar, +.avatar-group > .avatar .avatar-image-frame { + display: block; width: 100%; height: 100%; } @@ -4601,8 +4587,7 @@ image-carousel { align-self: flex-start; } -.message-avatar .avatar-image-frame, -.message-avatar .avatar-placeholder { +.message-avatar .avatar-image-frame { width: var(--avatar-size-message); height: var(--avatar-size-message); } @@ -5769,7 +5754,6 @@ chat-input .rich-text-input-placeholder { .reaction-row-avatar .avatar, .reaction-row-avatar .avatar-image-frame, -.reaction-row-avatar .avatar-placeholder, .reaction-row-avatar .avatar-image { width: 42px; height: 42px; @@ -9153,10 +9137,6 @@ context-menu-item-group > context-menu-item > button { margin-left: -8px; } -.settings-account-avatar-stack .avatar:first-child { - margin-left: 0; -} - .settings-account-avatar-stack .avatar .avatar-image-frame { width: 24px; height: 24px; @@ -9450,7 +9430,6 @@ context-menu-item-group > context-menu-item > button { } .account-switcher-item .avatar, -.account-switcher-item .avatar-placeholder, .account-switcher-item .skeleton-avatar { width: 40px; height: 40px; diff --git a/src/js/components/reactions-dialog.js b/src/js/components/reactions-dialog.js index 2e3698ba..621f70ff 100644 --- a/src/js/components/reactions-dialog.js +++ b/src/js/components/reactions-dialog.js @@ -4,7 +4,10 @@ import { effect } from "/js/signals.js"; import { scrollLocks } from "/js/scrollLocks.js"; import { closeWithAnimation } from "/js/dialogHelpers.js"; import { enableDragToDismiss } from "/js/dragHelpers.js"; -import { avatarTemplate } from "/js/templates/avatar.template.js"; +import { + avatarPlaceholderTemplate, + avatarTemplate, +} from "/js/templates/avatar.template.js"; import { getDisplayName, groupReactions } from "/js/dataHelpers.js"; import "/js/components/app-icon.js"; @@ -221,7 +224,7 @@ class ReactionsDialog extends Component { author: profile, clickAction: "none", }) - : html`
`} + : avatarPlaceholderTemplate()}
${displayName}
diff --git a/src/js/templates/accountSwitcherList.template.js b/src/js/templates/accountSwitcherList.template.js index b0bf25d6..89e11f31 100644 --- a/src/js/templates/accountSwitcherList.template.js +++ b/src/js/templates/accountSwitcherList.template.js @@ -1,6 +1,9 @@ import { html } from "/js/lib/lit-html.js"; import { getDisplayName } from "/js/dataHelpers.js"; -import { avatarTemplate } from "/js/templates/avatar.template.js"; +import { + avatarPlaceholderTemplate, + avatarTemplate, +} from "/js/templates/avatar.template.js"; import { verificationBadgeTemplate } from "/js/templates/verificationBadge.template.js"; import { automatedAccountBadgeTemplate } from "/js/templates/automatedAccountBadge.template.js"; import "/js/components/app-icon.js"; @@ -115,7 +118,7 @@ function identityTemplate({ profile, account }) { clickAction: "none", showLiveBadge: false, }) - : html`
`} + : avatarPlaceholderTemplate()}
diff --git a/src/js/views/chat.view.js b/src/js/views/chat.view.js index 36f6b295..ab189855 100644 --- a/src/js/views/chat.view.js +++ b/src/js/views/chat.view.js @@ -15,7 +15,10 @@ import { getInteractionTimestamp, MISSING_HANDLE, } from "/js/dataHelpers.js"; -import { avatarTemplate } from "/js/templates/avatar.template.js"; +import { + avatarPlaceholderTemplate, + avatarTemplate, +} from "/js/templates/avatar.template.js"; import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js"; import "/js/components/infinite-scroll-container.js"; import { paginatedListTemplate } from "/js/templates/paginatedList.template.js"; @@ -79,7 +82,7 @@ export default async function chatView({ } return otherUser ? avatarTemplate({ author: otherUser }) - : html`
`; + : avatarPlaceholderTemplate(); })()}
diff --git a/src/js/views/chatDetail.view.js b/src/js/views/chatDetail.view.js index 181dec9d..5e8dfdfd 100644 --- a/src/js/views/chatDetail.view.js +++ b/src/js/views/chatDetail.view.js @@ -22,7 +22,10 @@ import { groupReactions, } from "/js/dataHelpers.js"; import { parseRecordLink, resolveRecordFromLink } from "/js/embedHelpers.js"; -import { avatarTemplate } from "/js/templates/avatar.template.js"; +import { + avatarPlaceholderTemplate, + avatarTemplate, +} from "/js/templates/avatar.template.js"; import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js"; import { verificationBadgeTemplate } from "/js/templates/verificationBadge.template.js"; import { automatedAccountBadgeTemplate } from "/js/templates/automatedAccountBadge.template.js"; @@ -971,7 +974,7 @@ export default async function chatDetailView({ ? html`
${author ? avatarTemplate({ author }) - : html`
`} + : avatarPlaceholderTemplate()}
` : !isCurrentUser && !showAvatar ? html`
` diff --git a/src/js/views/chatRequests.view.js b/src/js/views/chatRequests.view.js index 653ac5d1..b58c98a5 100644 --- a/src/js/views/chatRequests.view.js +++ b/src/js/views/chatRequests.view.js @@ -10,7 +10,10 @@ import { getGroupConvoOwner, MISSING_HANDLE, } from "/js/dataHelpers.js"; -import { avatarTemplate } from "/js/templates/avatar.template.js"; +import { + avatarPlaceholderTemplate, + avatarTemplate, +} from "/js/templates/avatar.template.js"; import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js"; import { knownFollowersSummaryTemplate } from "/js/templates/knownFollowersSummary.template.js"; import { showToast } from "/js/toasts.js"; @@ -82,7 +85,7 @@ export default async function chatRequestsView({ } return otherMember ? avatarTemplate({ author: otherMember }) - : html`
`; + : avatarPlaceholderTemplate(); })()}
diff --git a/src/js/views/settings.view.js b/src/js/views/settings.view.js index 295cc867..81ad0cce 100644 --- a/src/js/views/settings.view.js +++ b/src/js/views/settings.view.js @@ -14,7 +14,10 @@ import "/js/components/context-menu-item.js"; import { confirmModal } from "/js/modals/confirm.modal.js"; import { showToast } from "/js/toasts.js"; import { Signal } from "/js/signals.js"; -import { avatarTemplate } from "/js/templates/avatar.template.js"; +import { + avatarPlaceholderTemplate, + avatarTemplate, +} from "/js/templates/avatar.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; export default async function settingsView({ @@ -73,13 +76,9 @@ export default async function settingsView({ > ${accounts.slice(0, 5).map((account) => { const profile = accountProfiles[account.did] ?? null; - if (!profile) { - return null; - } - return avatarTemplate({ - author: profile, - clickAction: "none", - }); + return profile + ? avatarTemplate({ author: profile, clickAction: "none" }) + : avatarPlaceholderTemplate(); })} `} @@ -105,14 +104,14 @@ export default async function settingsView({ } }} > - ${profile - ? html`${avatarTemplate({ + ${profile + ? avatarTemplate({ author: profile, clickAction: "none", - })}` - : null} + }) + : avatarPlaceholderTemplate()} ${getDisplayName(account)} ${account.needsReauth @@ -401,7 +400,9 @@ export default async function settingsView({ .then((profiles) => { const profilesByDid = {}; for (const profile of profiles) { - profilesByDid[profile.did] = profile; + if (profile) { + profilesByDid[profile.did] = profile; + } } $otherAccountProfiles.set(profilesByDid); }); diff --git a/tests/e2e/specs/views/settings.view.test.js b/tests/e2e/specs/views/settings.view.test.js index 36bc0b10..6f4456d6 100644 --- a/tests/e2e/specs/views/settings.view.test.js +++ b/tests/e2e/specs/views/settings.view.test.js @@ -159,6 +159,47 @@ test.describe("Settings view", () => { ); }); + test("shows avatar placeholders for accounts whose profile hasn't loaded", async ({ + page, + }) => { + const mockServer = new MockServer(); + const loadedProfile = createProfile({ + did: "did:plc:loadeduser123", + handle: "loadeduser.bsky.social", + }); + mockServer.addProfile(loadedProfile); + await mockServer.setup(page); + + await loginWithAccounts(page, [ + { did: userProfile.did, handle: userProfile.handle }, + { did: loadedProfile.did, handle: loadedProfile.handle }, + { did: "did:plc:unloadeduser456", handle: "unloaded.bsky.social" }, + ]); + await page.goto("/settings"); + + const view = page.locator("#settings-view"); + const stack = view.locator( + '[data-testid="settings-account-avatar-stack"]', + ); + await expect(stack.locator('[data-testid="avatar"]')).toHaveCount(1, { + timeout: 10000, + }); + await expect( + stack.locator('[data-testid="avatar-placeholder"]'), + ).toHaveCount(1); + + await view + .locator('[data-testid="settings-switch-account-toggle"]') + .click(); + + const rows = view.locator('[data-testid="settings-account-row"]'); + await expect(rows).toHaveCount(2); + await expect(rows.nth(0).locator('[data-testid="avatar"]')).toBeVisible(); + await expect( + rows.nth(1).locator('[data-testid="avatar-placeholder"]'), + ).toBeVisible(); + }); + test("shows a spinner in place of the ellipsis button while switching accounts", async ({ page, }) => { diff --git a/tests/unit/specs/templates/avatarGroup.template.test.js b/tests/unit/specs/templates/avatarGroup.template.test.js index 75cf66ed..75202991 100644 --- a/tests/unit/specs/templates/avatarGroup.template.test.js +++ b/tests/unit/specs/templates/avatarGroup.template.test.js @@ -25,7 +25,7 @@ describe("avatarGroupTemplate", () => { const container = renderTemplate([]); const group = container.querySelector(".avatar-group"); assert(group !== null); - assert(group.querySelector(".avatar-placeholder") !== null); + assert(group.querySelector("[data-testid='avatar-placeholder']") !== null); }); it("should render a single avatar without the group wrapper", () => {