feat(project): profiles loading overlay

jwplayer · Jul 14, 2023 · b37cd94 · b37cd94
1 parent 9bb2fa5
commit b37cd94
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/src/components/LoadingOverlay/LoadingOverlay.module.scss b/src/components/LoadingOverlay/LoadingOverlay.module.scss
@@ -29,3 +29,12 @@
   height: 100%;
   background-color: rgba(variables.$black, 0.3);
 }
+
+.profile {
+  img {
+    position: absolute;
+    width: calc(#{variables.$base-spacing} * 8);
+    height: calc(#{variables.$base-spacing} * 8);
+    border-radius: 50%;
+  }
+}
diff --git a/src/components/LoadingOverlay/LoadingOverlay.tsx b/src/components/LoadingOverlay/LoadingOverlay.tsx
@@ -8,18 +8,21 @@ import Spinner from '#components/Spinner/Spinner';
 type Props = {
   transparentBackground?: boolean;
   inline?: boolean;
+  profileImageUrl?: string;
 };
 
-const LoadingOverlay = ({ transparentBackground = false, inline = false }: Props): JSX.Element => {
+const LoadingOverlay = ({ transparentBackground = false, inline = false, profileImageUrl = '' }: Props): JSX.Element => {
   const className = classNames(styles.loadingOverlay, {
     [styles.transparent]: transparentBackground,
     [styles.fixed]: !inline,
     [styles.inline]: inline,
+    [styles.profile]: profileImageUrl,
   });
 
   return (
     <div className={className}>
-      <Spinner />
+      {profileImageUrl && <img src={profileImageUrl} alt="Profile Avatar" />}
+      <Spinner size={profileImageUrl ? 'large' : 'medium'} />
     </div>
   );
 };

diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss
@@ -30,6 +30,20 @@
   height: variables.$base-spacing;
 }
 
+.large {
+  width: 142px;
+  height: 142px;
+}
+
+.large div {
+  width: calc(#{variables.$base-spacing} * 8);
+  height: calc(#{variables.$base-spacing} * 8);
+}
+
+.large.buffer div {
+  border-color: variables.$red-dark variables.$white variables.$white variables.$white;
+}
+
 .buffer div:nth-child(1) {
   animation-delay: -0.45s;
 }

diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 import styles from './Spinner.module.scss';
 
 type Props = {
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
   className?: string;
 };
 
 const Spinner = ({ size = 'medium', className = '' }: Props): JSX.Element => {
   return (
-    <div className={classNames(styles.buffer, className, { [styles.small]: size === 'small' })}>
+    <div className={classNames(styles.buffer, className, { [styles.small]: size === 'small', [styles.large]: size === 'large' })}>
       <div />
       <div />
       <div />