fix(devtools): Fix styling transitions, loading indicator.

darkobits · Jun 7, 2024 · 650aaf2 · 650aaf2
1 parent edb9353
commit 650aaf2
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 34 deletions.
diff --git a/src/web/components/BackgroundImage.tsx b/src/web/components/BackgroundImage.tsx
@@ -78,12 +78,10 @@ export default function BackgroundImage(props: BackgroundImageProps) {
     // setAnimationName('none');
   }, [photo?.id, isActive]);
 
-  const srcSet = lowQualityUrl && fullQualityUrl
-    ? [
-      lowQualityUrl && `${lowQualityUrl} ${window.screen.width / 2}w`,
-      fullQualityUrl
-    ].filter(Boolean).join(', ')
-    : undefined;
+  const srcSet = lowQualityUrl && fullQualityUrl ? [
+    `${lowQualityUrl} ${Math.round(window.screen.width / 2)}w`,
+    fullQualityUrl
+  ].join(', ') : undefined;
 
   return (
     <div
@@ -114,7 +112,7 @@ export default function BackgroundImage(props: BackgroundImageProps) {
         <img
           alt="background"
           srcSet={srcSet}
-          src={lowQualityUrl ?? undefined}
+          src={lowQualityUrl ?? fullQualityUrl ?? undefined}
           className={classes.backgroundImage}
           style={{ animationName }}
         />

diff --git a/src/web/components/dev-tools/DevTools.tsx b/src/web/components/dev-tools/DevTools.tsx
@@ -205,11 +205,22 @@ export const DevTools = () => {
             autoCorrect="false"
             autoComplete="false"
             style={{
-              height: '100%'
+              height: '100%',
+              transitionProperty: 'color, background-color, border-color',
+              transitionTimingFunction: BACKGROUND_TRANSITION_FUNCTION,
+              transitionDuration: BACKGROUND_TRANSITION_DURATION
             }}
           />
         </Source>
-        <LoadingIndicator photo={currentPhoto} isLoading={isLoadingPhotos} />
+        <LoadingIndicator
+          photo={currentPhoto}
+          isLoading={isLoadingPhotos}
+          style={{
+            transitionProperty: 'color, background-color, border-color',
+            transitionTimingFunction: BACKGROUND_TRANSITION_FUNCTION,
+            transitionDuration: BACKGROUND_TRANSITION_DURATION
+          }}
+        />
       </div>
 
       {/* Palette */}
@@ -218,11 +229,9 @@ export const DevTools = () => {
           photo={currentPhoto}
           swatchProps={{
             style: {
-              transition: [
-                `background-color ${BACKGROUND_TRANSITION_DURATION} ${BACKGROUND_TRANSITION_FUNCTION}`,
-                `border-color ${BACKGROUND_TRANSITION_DURATION} ${BACKGROUND_TRANSITION_FUNCTION}`,
-                `color ${BACKGROUND_TRANSITION_DURATION} ${BACKGROUND_TRANSITION_FUNCTION}`
-              ].join(', ')
+              transitionProperty: 'color, background-color, border-color',
+              transitionTimingFunction: BACKGROUND_TRANSITION_FUNCTION,
+              transitionDuration: BACKGROUND_TRANSITION_DURATION
             }
           }}
         />

diff --git a/src/web/components/dev-tools/LoadingIndicator.tsx b/src/web/components/dev-tools/LoadingIndicator.tsx
@@ -4,17 +4,16 @@ import { InspiratPhotoResource } from 'etc/types';
 import { BASIS, BLACK, WHITE } from 'web/etc/constants';
 import { rgba } from 'web/lib/utils';
 
-
 import classes from './LoadingIndicator.css';
 
+import type { ElementProps } from 'web/etc/types';
 
-export interface LoadingIndicatorProps {
+export interface LoadingIndicatorProps extends ElementProps<HTMLDivElement> {
   photo: InspiratPhotoResource | undefined;
   isLoading: boolean;
 }
 
-
-export const LoadingIndicator = ({ photo, isLoading }: LoadingIndicatorProps) => {
+export function LoadingIndicator({ photo, isLoading, style }: LoadingIndicatorProps) {
   const fgColor = photo?.palette?.lightVibrant ?? WHITE;
   const bgColor = photo?.palette?.darkMuted ?? BLACK;
 
@@ -25,10 +24,11 @@ export const LoadingIndicator = ({ photo, isLoading }: LoadingIndicatorProps) =>
         height: BASIS,
         width: BASIS,
         backgroundColor: rgba(bgColor ?? BLACK),
-        color: rgba(fgColor ?? WHITE)
+        color: rgba(fgColor ?? WHITE),
+        ...style
       }}
     >
       {isLoading ? <BsArrowRepeat className={classes.spin} /> : <BsCheck />}
     </div>
   );
-};
+}
diff --git a/src/web/components/dev-tools/Source.tsx b/src/web/components/dev-tools/Source.tsx
@@ -1,24 +1,22 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { darken, desaturate, lighten } from 'polished';
-import React from 'react';
 
-import { InspiratPhotoResource } from 'etc/types';
 import { BASIS, WHITE, BLACK } from 'web/etc/constants';
 import { rgba } from 'web/lib/utils';
 
 import classes, { vars } from './Source.css';
 
+import type { InspiratPhotoResource } from 'etc/types';
+import type { ElementProps } from 'web/etc/types';
 
-// ----- Image Source ----------------------------------------------------------
-
-interface SourceProps extends React.PropsWithChildren<any> {
+interface SourceProps extends ElementProps<HTMLDivElement> {
   photo: InspiratPhotoResource | undefined;
 }
 
 /**
  * Image override component.
  */
-export const Source = ({ photo, children }: SourceProps) => {
+export function Source({ photo, children, style }: SourceProps) {
   const fgColor = photo?.palette?.lightVibrant ?? WHITE;
   const bgColor = photo?.palette?.darkVibrant ?? BLACK;
 
@@ -39,10 +37,11 @@ export const Source = ({ photo, children }: SourceProps) => {
           [vars.input.focus.borderColor]: desaturate(0.6, rgba(fgColor, 0.6)),
           [vars.input.placeholder.color]: rgba(fgColor, 0.32),
           [vars.input.selection.backgroundColor]: darken(0.05, rgba(bgColor, 0.5))
-        })
+        }),
+        ...style
       }}
     >
       {children}
     </div>
   );
-};
+}
diff --git a/src/web/lib/utils.ts b/src/web/lib/utils.ts
@@ -205,14 +205,9 @@ export async function preloadImage(imgUrl: string) {
  */
 preloadImage.isLoadingImages = () => {
   const states = new Set(preloadImageCache.values());
-  return !states.has('LOADING');
+  return states.has('LOADING');
 };
 
-// @ts-expect-error
-window.preloadImageCache = preloadImageCache;
-// @ts-expect-error
-window.isLoadingImages = preloadImage.isLoadingImages;
-
 /**
  * Used by DevTools to transform a URL pasted into the URL input into a sparse
  * InspiratPhotoResource.