chore: shortens loading overlay in/out animation duration (#1925)

src/admin/components/elements/Loading/index.scss

@@ -15,17 +15,17 @@
   pointer-events: none;
   z-index: calc(var(--z-status) + 1);
   transition-property: left, width;
-  transition: 250ms ease-in-out;
+  transition: 250ms ease;
 
   &.loading-overlay--entering {
     opacity: 1;
-    animation: 500ms fade-in ease-in-out;
+    animation: fade-in ease;
     pointer-events: all;
   }
 
   &.loading-overlay--exiting {
     opacity: 0;
-    animation: 500ms fade-out ease-in-out;
+    animation: fade-out ease;
   }
 
   &.loading-overlay--withoutNav {
@@ -87,7 +87,7 @@
     margin-top: base(.75);
     text-transform: uppercase;
     font-family: var(--font-body);
-    font-size: base(.75);
+    font-size: base(.65);
     letter-spacing: 3px;
   }
 }

src/admin/components/elements/Loading/index.tsx

@@ -13,8 +13,9 @@ type Props = {
   show?: boolean;
   loadingText?: string;
   overlayType?: string
+  animationDuration?: string;
 }
-export const LoadingOverlay: React.FC<Props> = ({ loadingText, show = true, overlayType }) => {
+export const LoadingOverlay: React.FC<Props> = ({ loadingText, show = true, overlayType, animationDuration }) => {
   const { t } = useTranslation('general');
 
   return (
@@ -24,6 +25,9 @@ export const LoadingOverlay: React.FC<Props> = ({ loadingText, show = true, over
         show ? `${baseClass}--entering` : `${baseClass}--exiting`,
         overlayType ? `${baseClass}--${overlayType}` : '',
       ].filter(Boolean).join(' ')}
+      style={{
+        animationDuration: animationDuration || '500ms',
+      }}
     >
       <div className={`${baseClass}__bars`}>
         <div className={`${baseClass}__bar`} />

src/admin/components/utilities/LoadingOverlay/index.tsx

@@ -5,12 +5,12 @@ import { reducer, defaultLoadingOverlayState } from './reducer';
 import { LoadingOverlay } from '../../elements/Loading';
 import type { LoadingOverlayContext, ToggleLoadingOverlay } from './types';
 
-const initialContext: LoadingOverlayContext = {
+const animatedDuration = 250;
+
+const Context = createContext({
   toggleLoadingOverlay: undefined,
   isOnScreen: false,
-};
-
-const Context = createContext(initialContext);
+});
 
 export const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const { t } = useTranslation('general');
@@ -23,6 +23,10 @@ export const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> =
     triggerDelayedRender,
   } = useDelayedRender({
     show: overlays.isLoading,
+    delayBeforeShow: 1000,
+    inTimeout: animatedDuration,
+    outTimeout: animatedDuration,
+    minShowTime: 500,
   });
 
   const toggleLoadingOverlay = React.useCallback<ToggleLoadingOverlay>(({ type, key, isLoading, loadingText = fallbackText }) => {
@@ -59,6 +63,7 @@ export const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> =
           show={!isUnmounting}
           loadingText={overlays.loadingText || fallbackText}
           overlayType={overlays.overlayType}
+          animationDuration={`${animatedDuration}ms`}
         />
       )}
       {children}

src/admin/hooks/useDelayedRender.ts

@@ -7,13 +7,13 @@ type DelayedRenderProps = {
    * */
   show: boolean;
   /** Time in ms to wait before "mounting" the component. */
-  delayBeforeShow?: number;
+  delayBeforeShow: number;
   /** Time in ms for the "enter" phase of the transition, after delay completes. */
-  inTimeout?: number;
+  inTimeout: number;
   /** Min time in ms for the "entered" phase of the transition. */
-  minShowTime?: number;
+  minShowTime: number;
   /** Time in ms for the exit phase of the transition. */
-  outTimeout?: number;
+  outTimeout: number;
 };
 type useDelayedRenderT = (props: DelayedRenderProps) => {
   /** `true` if the component has mounted after the timeout. */
@@ -23,7 +23,7 @@ type useDelayedRenderT = (props: DelayedRenderProps) => {
   /** Call this function to trigger the timeout delay before rendering. */
   triggerDelayedRender: () => void;
 };
-export const useDelayedRender: useDelayedRenderT = ({ show, delayBeforeShow = 1000, inTimeout = 500, minShowTime = 500, outTimeout = 500 }) => {
+export const useDelayedRender: useDelayedRenderT = ({ show, delayBeforeShow, inTimeout, minShowTime, outTimeout }) => {
   const totalMountTime = inTimeout + minShowTime + outTimeout;
   const [hasDelayed, triggerDelay] = useDelay(delayBeforeShow);
   const [isMounted, setIsMounted] = React.useState(false);