Merge pull request #2119 from daostack/feature/CW-2116-loader-delay

Wait 2 sec before showing spining loaders #2116

src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss

@@ -54,5 +54,6 @@
 .loaderContainer {
   display: flex;
   height: 100%;
+  justify-content: center;
   align-items: center;
 }

src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx

@@ -12,9 +12,12 @@ import { scroller, animateScroll } from "react-scroll";
 import { v4 as uuidv4 } from "uuid";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { EmptyTabComponent } from "@/pages/OldCommon/components/CommonDetailContainer";
-import { Loader } from "@/shared/components";
 import { ChatMessage, InternalLinkData } from "@/shared/components";
-import { ChatType, QueryParamKey } from "@/shared/constants";
+import {
+  ChatType,
+  LOADER_APPEARANCE_DELAY,
+  QueryParamKey,
+} from "@/shared/constants";
 import { useQueryParams } from "@/shared/hooks";
 import {
   checkIsUserDiscussionMessage,
@@ -25,6 +28,7 @@ import {
   User,
   Circles,
 } from "@/shared/models";
+import { Loader } from "@/shared/ui-kit";
 import { formatDate } from "@/shared/utils";
 import { Separator } from "./components";
 import { checkIsLastSeenInPreviousDay } from "./utils";
@@ -209,7 +213,7 @@ const ChatContent: ForwardRefRenderFunction<
   if (isLoading) {
     return (
       <div className={styles.loaderContainer}>
-        <Loader />
+        <Loader delay={LOADER_APPEARANCE_DELAY} />
       </div>
     );
   }

src/pages/common/components/FeedCard/FeedCard.tsx

@@ -84,7 +84,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     hasImages,
     hasFiles,
   } = props;
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isTabletView = useIsTabletView();
   const { setExpandedFeedItemId, renderFeedItemBaseContent, feedCardSettings } =
     useFeedItemContext();

src/pages/commonFeed/CommonFeed.tsx

@@ -20,7 +20,11 @@ import { MembershipRequestModal } from "@/pages/OldCommon/components";
 import { FeedItemBaseContent, FeedItemBaseContentProps } from "@/pages/common";
 import { JoinProjectModal } from "@/pages/common/components/JoinProjectModal";
 import { useJoinProjectAutomatically } from "@/pages/common/hooks";
-import { CommonAction, QueryParamKey } from "@/shared/constants";
+import {
+  CommonAction,
+  LOADER_APPEARANCE_DELAY,
+  QueryParamKey,
+} from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
 import { useCommonFeedItems, useUserCommonIds } from "@/shared/hooks/useCases";
@@ -396,7 +400,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   if (!isDataFetched) {
     return (
       <div className={styles.centerWrapper}>
-        <Loader />
+        <Loader delay={LOADER_APPEARANCE_DELAY} />
       </div>
     );
   }

src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx

@@ -15,7 +15,6 @@ import { useHistory } from "react-router-dom";
 import { useWindowSize } from "react-use";
 import classNames from "classnames";
 import { selectUser } from "@/pages/Auth/store/selectors";
-import { MembershipRequestModal } from "@/pages/OldCommon/components";
 import { useCommonMember } from "@/pages/OldCommon/hooks";
 import {
   FeedItem,
@@ -31,12 +30,15 @@ import {
   ChatItem,
 } from "@/pages/common/components/ChatComponent";
 import { ChatContext } from "@/pages/common/components/ChatComponent/context";
-import { JoinProjectModal } from "@/pages/common/components/JoinProjectModal";
-import { useJoinProjectAutomatically } from "@/pages/common/hooks";
 import { InternalLinkData } from "@/shared/components";
-import { InboxItemType, QueryParamKey, ROUTE_PATHS } from "@/shared/constants";
+import {
+  InboxItemType,
+  LOADER_APPEARANCE_DELAY,
+  QueryParamKey,
+  ROUTE_PATHS,
+} from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
-import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
+import { useQueryParams } from "@/shared/hooks";
 import { useGovernanceByCommonId } from "@/shared/hooks/useCases";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import {
@@ -637,7 +639,11 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
           >
             {topContent}
             {isContentEmpty && <p className={styles.emptyText}>{emptyText}</p>}
-            <InfiniteScroll onFetchNext={onFetchNext} isLoading={loading}>
+            <InfiniteScroll
+              onFetchNext={onFetchNext}
+              isLoading={loading}
+              loaderDelay={LOADER_APPEARANCE_DELAY}
+            >
               {allFeedItems?.map((item) => {
                 const isActive = item.itemId === activeFeedItemId;
 

src/pages/commonFeed/components/FeedLayout/components/DesktopChatPlaceholder/DesktopChatPlaceholder.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import classNames from "classnames";
+import { LOADER_APPEARANCE_DELAY } from "@/shared/constants";
 import { Loader } from "@/shared/ui-kit";
 import { DesktopRightPane } from "../DesktopRightPane";
 import desktopChatStyles from "../DesktopChat/DesktopChat.module.scss";
@@ -17,7 +18,9 @@ const DesktopChatPlaceholder: FC<DesktopChatPlaceholderProps> = (props) => {
   return (
     <DesktopRightPane className={classNames(styles.container, className)}>
       {withTitle && <div className={desktopChatStyles.titleWrapper} />}
-      <div className={styles.loaderWrapper}>{isItemSelected && <Loader />}</div>
+      <div className={styles.loaderWrapper}>
+        {isItemSelected && <Loader delay={LOADER_APPEARANCE_DELAY} />}
+      </div>
     </DesktopRightPane>
   );
 };

src/pages/inbox/BaseInbox.tsx

@@ -16,7 +16,7 @@ import {
   FeedLayoutOuterStyles,
   FeedLayoutSettings,
 } from "@/pages/commonFeed";
-import { QueryParamKey } from "@/shared/constants";
+import { LOADER_APPEARANCE_DELAY, QueryParamKey } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { ChatChannelToDiscussionConverter } from "@/shared/converters";
 import { useQueryParams } from "@/shared/hooks";
@@ -225,7 +225,7 @@ const InboxPage: FC<InboxPageProps> = (props) => {
   if (!isDataFetched) {
     return (
       <div className={styles.centerWrapper}>
-        <Loader />
+        <Loader delay={LOADER_APPEARANCE_DELAY} />
       </div>
     );
   }

src/shared/constants/shared.tsx

@@ -109,3 +109,5 @@ export const ANONYMOUS_USER_FIRST_NAME = "Anonymous";
 export const ANONYMOUS_USER_LAST_NAME = "User";
 
 export const GA_MEASUREMENT_ID = "G-1W2BNV5QZ9";
+
+export const LOADER_APPEARANCE_DELAY = 2000;

src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.tsx

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode, useCallback, useMemo } from "react";
 import { useHistory } from "react-router";
 import { CreateCommonModal } from "@/pages/OldCommon/components";
+import { LOADER_APPEARANCE_DELAY } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal } from "@/shared/hooks";
 import { Common } from "@/shared/models";
@@ -75,7 +76,7 @@ const Projects: FC<ProjectsProps> = (props) => {
 
   if (!parentItem) {
     return areCommonsLoading ? (
-      <Loader className={styles.loader} />
+      <Loader className={styles.loader} delay={LOADER_APPEARANCE_DELAY} />
     ) : (
       <>
         {renderNoItemsInfo?.() || null}

src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/ProjectsTree/ProjectsTree.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useMemo } from "react";
+import { LOADER_APPEARANCE_DELAY } from "@/shared/constants";
 import { Loader } from "@/shared/ui-kit";
 import { ProjectsStateItem } from "@/store/states";
 import { Scrollbar } from "../../../../../SidenavLayout/components/SidenavContent";
@@ -96,7 +97,9 @@ const ProjectsTree: FC<ProjectsTreeProps> = (props) => {
           }
           level={INITIAL_TREE_ITEMS_LEVEL}
         />
-        {isLoading && <Loader className={styles.loader} />}
+        {isLoading && (
+          <Loader className={styles.loader} delay={LOADER_APPEARANCE_DELAY} />
+        )}
       </Scrollbar>
     </TreeContext.Provider>
   );

src/shared/ui-kit/InfiniteScroll/InfiniteScroll.tsx

@@ -5,11 +5,12 @@ import styles from "./InfiniteScroll.module.scss";
 
 interface InfiniteScrollProps {
   isLoading: boolean;
+  loaderDelay?: number;
   onFetchNext: () => void;
 }
 
 const InfiniteScroll: FC<InfiniteScrollProps> = (props) => {
-  const { isLoading, onFetchNext, children } = props;
+  const { isLoading, loaderDelay, onFetchNext, children } = props;
   const [isInnerLoading, setIsInnerLoading] = useState(isLoading);
   const markerRef = useRef<HTMLDivElement>(null);
   const isMarkerOnScreen = useIntersectionObserver(markerRef.current);
@@ -41,7 +42,7 @@ const InfiniteScroll: FC<InfiniteScrollProps> = (props) => {
       <div ref={markerRef} />
       {isLoading && (
         <div className={styles.loaderWrapper}>
-          <Loader />
+          <Loader delay={loaderDelay} />
         </div>
       )}
     </>

src/shared/ui-kit/Loader/Loader.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import loaderDefault from "@/shared/assets/icons/loader-pink.svg";
 import loaderWhite from "@/shared/assets/icons/loader-white.svg";
@@ -20,6 +20,7 @@ interface LoaderProps {
   overlayClassName?: string;
   variant?: LoaderVariant;
   color?: LoaderColor;
+  delay?: number;
 }
 
 const Loader: FC<LoaderProps> = (props) => {
@@ -28,7 +29,10 @@ const Loader: FC<LoaderProps> = (props) => {
     overlayClassName,
     variant = LoaderVariant.Default,
     color = LoaderColor.Default,
+    delay,
   } = props;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [isShowing, setIsShowing] = useState(!delay);
   const loaderEl = (
     <img
       className={classNames(styles.loader, className)}
@@ -37,6 +41,22 @@ const Loader: FC<LoaderProps> = (props) => {
     />
   );
 
+  useEffect(() => {
+    if (!delay) {
+      return;
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setIsShowing(true);
+    }, delay);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [delay]);
+
   if (variant === LoaderVariant.Global) {
     return (
       <Portal>
@@ -49,7 +69,7 @@ const Loader: FC<LoaderProps> = (props) => {
     );
   }
 
-  return loaderEl;
+  return isShowing ? loaderEl : null;
 };
 
 export default Loader;