Use loading spinner for loading status

Author: LauraBeatris

packages/ui/package.json

@@ -79,7 +79,6 @@
     "@solana/wallet-adapter-react": "catalog:module-manager",
     "@solana/wallet-standard": "catalog:module-manager",
     "@swc/helpers": "catalog:repo",
-    "blurhash": "^2.0.5",
     "copy-to-clipboard": "3.3.3",
     "core-js": "catalog:repo",
     "csstype": "3.1.3",

packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx

@@ -10,11 +10,11 @@ import { localizationKeys } from '../../localization';
 export const OrganizationProfileAvatarUploader = (
   props: Omit<AvatarUploaderProps, 'avatarPreview' | 'title'> & {
     organization: Partial<OrganizationResource>;
-    /** A data URL to show as a placeholder while the image is loading (e.g., decoded blurhash) */
-    blurHashPlaceholder?: string;
+    /** Shows a loading spinner while the image is loading */
+    showLoadingSpinner?: boolean;
   },
 ) => {
-  const { organization, blurHashPlaceholder, ...rest } = props;
+  const { organization, showLoadingSpinner, ...rest } = props;
 
   return (
     <Col elementDescriptor={descriptors.organizationAvatarUploaderContainer}>
@@ -32,7 +32,7 @@ export const OrganizationProfileAvatarUploader = (
         avatarPreview={
           <OrganizationAvatar
             size={theme => theme.sizes.$16}
-            blurHashPlaceholder={blurHashPlaceholder}
+            showLoadingSpinner={showLoadingSpinner}
             {...organization}
           />
         }

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

@@ -1,6 +1,6 @@
 import { useOrganizationList } from '@clerk/shared/react';
 import type { CreateOrganizationParams, OrganizationCreationDefaultsResource } from '@clerk/shared/types';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 import { useEnvironment } from '@/ui/contexts';
 import { useSessionTasksContext, useTaskChooseOrganizationContext } from '@/ui/contexts/components/SessionTasks';
@@ -12,7 +12,6 @@ import { FormContainer } from '@/ui/elements/FormContainer';
 import { Header } from '@/ui/elements/Header';
 import { IconButton } from '@/ui/elements/IconButton';
 import { Upload } from '@/ui/icons';
-import { decodeBlurHash } from '@/ui/utils/blurhash';
 import { createSlug } from '@/ui/utils/createSlug';
 import { handleError } from '@/ui/utils/errorHandler';
 import { useFormControl } from '@/ui/utils/useFormControl';
@@ -101,10 +100,6 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
 
   const isSubmitButtonDisabled = !nameField.value || !isLoaded;
   const defaultLogoUrl = file === undefined ? props.organizationCreationDefaults?.form.logo : undefined;
-  const blurHashPlaceholder = useMemo(
-    () => decodeBlurHash(props.organizationCreationDefaults?.form.blurHash),
-    [props.organizationCreationDefaults?.form.blurHash],
-  );
 
   return (
     <>
@@ -123,7 +118,7 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
             organization={{ name: nameField.value, imageUrl: defaultLogoUrl ?? undefined }}
             onAvatarChange={async file => await setFile(file)}
             onAvatarRemove={file || defaultLogoUrl ? onAvatarRemove : null}
-            blurHashPlaceholder={defaultLogoUrl ? blurHashPlaceholder : undefined}
+            showLoadingSpinner={!!defaultLogoUrl}
             avatarPreviewPlaceholder={
               <IconButton
                 variant='ghost'

packages/ui/src/elements/Avatar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Image, Text } from '../customizables';
+import { Box, descriptors, Flex, Image, Spinner, Text } from '../customizables';
 import type { ElementDescriptor } from '../customizables/elementDescriptors';
 import type { InternalTheme } from '../foundations';
 import type { PropsOfComponent } from '../styledSystem';
@@ -15,8 +15,8 @@ type AvatarProps = PropsOfComponent<typeof Flex> & {
   rounded?: boolean;
   boxElementDescriptor?: ElementDescriptor;
   imageElementDescriptor?: ElementDescriptor;
-  /** A data URL to show as a placeholder while the image is loading (e.g., decoded blurhash) */
-  blurHashPlaceholder?: string;
+  /** Shows a loading spinner while the image is loading */
+  showLoadingSpinner?: boolean;
 };
 
 export const Avatar = (props: AvatarProps) => {
@@ -30,7 +30,7 @@ export const Avatar = (props: AvatarProps) => {
     sx,
     boxElementDescriptor,
     imageElementDescriptor,
-    blurHashPlaceholder,
+    showLoadingSpinner = false,
   } = props;
   const [error, setError] = React.useState(false);
   const [loaded, setLoaded] = React.useState(false);
@@ -41,6 +41,8 @@ export const Avatar = (props: AvatarProps) => {
     setError(false);
   }, [imageUrl]);
 
+  const isLoading = showLoadingSpinner && imageUrl && !loaded && !error;
+
   const ImgOrFallback =
     initials && (!imageUrl || error) ? (
       <InitialsAvatarFallback initials={initials} />
@@ -54,7 +56,7 @@ export const Avatar = (props: AvatarProps) => {
           objectFit: 'cover',
           width: '100%',
           height: '100%',
-          opacity: loaded ? 1 : 0,
+          opacity: showLoadingSpinner ? (loaded ? 1 : 0) : 1,
           transition: 'opacity 0.2s ease-in-out',
         }}
         onError={() => setError(true)}
@@ -78,19 +80,30 @@ export const Avatar = (props: AvatarProps) => {
           backgroundColor: t.colors.$avatarBackground,
           backgroundClip: 'padding-box',
           position: 'relative',
-          ...(blurHashPlaceholder && !loaded && imageUrl
-            ? {
-                backgroundImage: `url(${blurHashPlaceholder})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-              }
-            : {}),
         }),
         sx,
       ]}
     >
       {ImgOrFallback}
 
+      {isLoading && (
+        <Flex
+          as='span'
+          sx={t => ({
+            position: 'absolute',
+            inset: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: t.colors.$avatarBackground,
+          })}
+        >
+          <Spinner
+            size='sm'
+            colorScheme='neutral'
+          />
+        </Flex>
+      )}
+
       {/* /**
        * This Box is the "shimmer" effect for the avatar.
        * The ":after" selector is responsible for the border shimmer animation.

packages/ui/src/elements/OrganizationAvatar.tsx

@@ -5,18 +5,18 @@ import { Avatar } from './Avatar';
 
 type OrganizationAvatarProps = PropsOfComponent<typeof Avatar> &
   Partial<Pick<OrganizationResource, 'name' | 'imageUrl'>> & {
-    /** A data URL to show as a placeholder while the image is loading (e.g., decoded blurhash) */
-    blurHashPlaceholder?: string;
+    /** Shows a loading spinner while the image is loading */
+    showLoadingSpinner?: boolean;
   };
 
 export const OrganizationAvatar = (props: OrganizationAvatarProps) => {
-  const { name = '', imageUrl, blurHashPlaceholder, ...rest } = props;
+  const { name = '', imageUrl, showLoadingSpinner, ...rest } = props;
   return (
     <Avatar
       title={name}
       initials={(name || ' ')[0]}
       imageUrl={imageUrl}
-      blurHashPlaceholder={blurHashPlaceholder}
+      showLoadingSpinner={showLoadingSpinner}
       rounded={false}
       {...rest}
     />