ensure loader fills image swiper, and only display loader when replay data is nullish, not when it's loaded but there's no image data (#1819)

Closes #1818 

- Refactors image renderers, and changes the condition for which the
loading indicator is displayed from "`<data>.blobUrl` exists and has a
truthey value" to "`<data>` is not nullish"
- Adds an additional class config to the shared QA loading indicator,
and uses it in the image slider view to add a background and aspect
ratio to the loading indicator's container so that it takes up the space
it should and has an opaque background

| Before | After |
| --- | --- |
| <img width="813" alt="Screenshot 2024-05-22 at 5 17 14 PM"
src="https://github.com/webrecorder/browsertrix/assets/5727389/fb8a3a83-a0c8-46c1-b59b-a59adff2a175">
| <img width="813" alt="Screenshot 2024-05-22 at 5 17 31 PM"
src="https://github.com/webrecorder/browsertrix/assets/5727389/6fe5d04a-ffa9-4fc3-bc3b-bdb9b7b30948">
|
This commit is contained in:
Emma Segal-Grossman 2024-05-28 14:02:49 -04:00 committed by GitHub
parent 8faf0adb55
commit 6a94c64fa2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 26 deletions

View File

@ -2,13 +2,14 @@ import { msg } from "@lit/localize";
import clsx from "clsx";
import { html } from "lit";
import { guard } from "lit/directives/guard.js";
import { when } from "lit/directives/when.js";
import type { BlobPayload, ReplayData } from "../types";
import { renderSpinner } from "./spinner";
function image(blobUrl: BlobPayload["blobUrl"]) {
import { tw } from "@/utils/tailwind";
function image(blobUrl: BlobPayload["blobUrl"] | undefined) {
if (!blobUrl) {
return html`<div
class="flex aspect-video h-full w-full flex-col items-center justify-center gap-2 bg-slate-50 text-xs text-neutral-500"
@ -28,11 +29,18 @@ function image(blobUrl: BlobPayload["blobUrl"]) {
`;
}
const imageSpinner = renderSpinner(tw`aspect-video bg-slate-50`);
const renderImage = (data: ReplayData | null) =>
guard(data, () => (data != null ? image(data.blobUrl) : imageSpinner));
export function renderScreenshots(
crawlData: ReplayData,
qaData: ReplayData,
splitView: boolean,
) {
const crawlImage = renderImage(crawlData);
const qaImage = renderImage(qaData);
const content = html`
<div class=${clsx("flex", !splitView && "justify-between")}>
<h3
@ -60,21 +68,13 @@ export function renderScreenshots(
class="aspect-video flex-1 overflow-hidden rounded-lg border bg-slate-50"
aria-labelledby="crawlScreenshotHeading"
>
${when(
crawlData?.blobUrl !== undefined && crawlData.blobUrl,
image,
renderSpinner,
)}
${crawlImage}
</div>
<div
class="aspect-video flex-1 overflow-hidden rounded-lg border bg-slate-50"
aria-labelledby="qaScreenshotHeading"
>
${when(
qaData?.blobUrl !== undefined && qaData.blobUrl,
image,
renderSpinner,
)}
${qaImage}
</div>
</div>`
: html`
@ -83,18 +83,10 @@ export function renderScreenshots(
>
<sl-image-comparer class="h-full w-full">
<div slot="after" aria-labelledby="crawlScreenshotHeading">
${when(
crawlData?.blobUrl !== undefined && crawlData.blobUrl,
image,
renderSpinner,
)}
${crawlImage}
</div>
<div slot="before" aria-labelledby="qaScreenshotHeading">
${when(
qaData?.blobUrl !== undefined && qaData.blobUrl,
image,
renderSpinner,
)}
${qaImage}
</div>
</sl-image-comparer>
</div>

View File

@ -1,10 +1,12 @@
import clsx from "clsx";
import { html } from "lit";
import { tw } from "@/utils/tailwind";
export function renderSpinner() {
export function renderSpinner(className?: clsx.ClassValue) {
return html`<div
class=${tw`flex h-full w-full items-center justify-center p-9 text-2xl`}
class=${clsx(
"flex h-full w-full items-center justify-center p-9 text-2xl",
className,
)}
>
<sl-spinner></sl-spinner>
</div>`;