From 9d5911d4e436859127f38d5fcdaa6cb5ce6d01e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Sat, 29 Apr 2023 22:57:46 +0900 Subject: [PATCH] feat: make `MkImgWithBlurhash` transitionable (#10500) * feat: make `MkImgWithBlurhash` animatable * refactor: split out transition styles * fix: bug * test: waitFor image loads * style: remove unused await * fix * fix type error --------- Co-authored-by: tamaina --- .../MkGalleryPostPreview.stories.impl.ts | 8 +-- .../src/components/MkGalleryPostPreview.vue | 52 ++++++++++++++----- .../src/components/MkImgWithBlurhash.vue | 52 ++++++++++++++++--- 3 files changed, 88 insertions(+), 24 deletions(-) diff --git a/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts b/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts index e46a70819..57b3e7551 100644 --- a/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts +++ b/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts @@ -28,9 +28,11 @@ export const Default = { async play({ canvasElement }) { const canvas = within(canvasElement); const links = canvas.getAllByRole('link'); - await expect(links).toHaveLength(2); - await expect(links[0]).toHaveAttribute('href', `/gallery/${galleryPost().id}`); - await expect(links[1]).toHaveAttribute('href', `/@${galleryPost().user.username}@${galleryPost().user.host}`); + expect(links).toHaveLength(2); + expect(links[0]).toHaveAttribute('href', `/gallery/${galleryPost().id}`); + expect(links[1]).toHaveAttribute('href', `/@${galleryPost().user.username}@${galleryPost().user.host}`); + const images = canvas.getAllByRole('img'); + await waitFor(() => expect(Promise.all(images.map((image) => image.decode()))).resolves.toBeDefined()); }, args: { post: galleryPost(), diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue index 944f5ad97..4f8f7b945 100644 --- a/packages/frontend/src/components/MkGalleryPostPreview.vue +++ b/packages/frontend/src/components/MkGalleryPostPreview.vue @@ -1,9 +1,21 @@