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:
		
							parent
							
								
									8faf0adb55
								
							
						
					
					
						commit
						6a94c64fa2
					
				| @ -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> | ||||
|  | ||||
| @ -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>`;
 | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user