Use loading spinner for loading status

Author: LauraBeatris

packages/clerk-js/src/core/resources/OrganizationCreationDefaults.ts

@@ -18,10 +18,12 @@ export class OrganizationCreationDefaults extends BaseResource implements Organi
     name: string;
     slug: string;
     logo: string | null;
+    blurHash: string | null;
   } = {
     name: '',
     slug: '',
     logo: null,
+    blurHash: null,
   };
 
   public constructor(data: OrganizationCreationDefaultsJSON | OrganizationCreationDefaultsJSONSnapshot | null = null) {
@@ -42,6 +44,7 @@ export class OrganizationCreationDefaults extends BaseResource implements Organi
       this.form.name = this.withDefault(data.form.name, this.form.name);
       this.form.slug = this.withDefault(data.form.slug, this.form.slug);
       this.form.logo = this.withDefault(data.form.logo, this.form.logo);
+      this.form.blurHash = this.withDefault(data.form.blur_hash, this.form.blurHash);
     }
 
     return this;

packages/shared/src/types/organizationCreationDefaults.ts

@@ -15,6 +15,7 @@ export interface OrganizationCreationDefaultsJSON extends ClerkResourceJSON {
     name: string;
     slug: string;
     logo: string | null;
+    blur_hash: string | null;
   };
 }
 
@@ -28,5 +29,6 @@ export interface OrganizationCreationDefaultsResource extends ClerkResource {
     name: string;
     slug: string;
     logo: string | null;
+    blurHash: string | null;
   };
 }

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

@@ -8,9 +8,13 @@ import { Col, descriptors, Text } from '../../customizables';
 import { localizationKeys } from '../../localization';
 
 export const OrganizationProfileAvatarUploader = (
-  props: Omit<AvatarUploaderProps, 'avatarPreview' | 'title'> & { organization: Partial<OrganizationResource> },
+  props: Omit<AvatarUploaderProps, 'avatarPreview' | 'title'> & {
+    organization: Partial<OrganizationResource>;
+    /** Shows a loading spinner while the image is loading */
+    showLoadingSpinner?: boolean;
+  },
 ) => {
-  const { organization, ...rest } = props;
+  const { organization, showLoadingSpinner, ...rest } = props;
 
   return (
     <Col elementDescriptor={descriptors.organizationAvatarUploaderContainer}>
@@ -28,6 +32,7 @@ export const OrganizationProfileAvatarUploader = (
         avatarPreview={
           <OrganizationAvatar
             size={theme => theme.sizes.$16}
+            showLoadingSpinner={showLoadingSpinner}
             {...organization}
           />
         }

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

@@ -118,6 +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}
+            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,6 +15,8 @@ type AvatarProps = PropsOfComponent<typeof Flex> & {
   rounded?: boolean;
   boxElementDescriptor?: ElementDescriptor;
   imageElementDescriptor?: ElementDescriptor;
+  /** Shows a loading spinner while the image is loading */
+  showLoadingSpinner?: boolean;
 };
 
 export const Avatar = (props: AvatarProps) => {
@@ -28,8 +30,18 @@ export const Avatar = (props: AvatarProps) => {
     sx,
     boxElementDescriptor,
     imageElementDescriptor,
+    showLoadingSpinner = false,
   } = props;
   const [error, setError] = React.useState(false);
+  const [loaded, setLoaded] = React.useState(false);
+
+  // Reset loaded state when imageUrl changes
+  React.useEffect(() => {
+    setLoaded(false);
+    setError(false);
+  }, [imageUrl]);
+
+  const isLoading = showLoadingSpinner && imageUrl && !loaded && !error;
 
   const ImgOrFallback =
     initials && (!imageUrl || error) ? (
@@ -40,8 +52,15 @@ export const Avatar = (props: AvatarProps) => {
         title={title}
         alt={`${title}'s logo`}
         src={imageUrl || ''}
-        sx={{ objectFit: 'cover', width: '100%', height: '100%' }}
+        sx={{
+          objectFit: 'cover',
+          width: '100%',
+          height: '100%',
+          opacity: showLoadingSpinner ? (loaded ? 1 : 0) : 1,
+          transition: 'opacity 0.2s ease-in-out',
+        }}
         onError={() => setError(true)}
+        onLoad={() => setLoaded(true)}
         size={imageFetchSize}
       />
     );
@@ -67,6 +86,24 @@ export const Avatar = (props: AvatarProps) => {
     >
       {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

@@ -4,15 +4,19 @@ import type { PropsOfComponent } from '../styledSystem';
 import { Avatar } from './Avatar';
 
 type OrganizationAvatarProps = PropsOfComponent<typeof Avatar> &
-  Partial<Pick<OrganizationResource, 'name' | 'imageUrl'>>;
+  Partial<Pick<OrganizationResource, 'name' | 'imageUrl'>> & {
+    /** Shows a loading spinner while the image is loading */
+    showLoadingSpinner?: boolean;
+  };
 
 export const OrganizationAvatar = (props: OrganizationAvatarProps) => {
-  const { name = '', imageUrl, ...rest } = props;
+  const { name = '', imageUrl, showLoadingSpinner, ...rest } = props;
   return (
     <Avatar
       title={name}
       initials={(name || ' ')[0]}
       imageUrl={imageUrl}
+      showLoadingSpinner={showLoadingSpinner}
       rounded={false}
       {...rest}
     />