fix(#644): fix scroll issues

kimbu-chat · Oct 12, 2021 · d46d764 · d46d764
1 parent beeae09
commit d46d764
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 47 deletions.
diff --git a/src/components/message-item/message-item.scss b/src/components/message-item/message-item.scss
@@ -193,8 +193,8 @@
   }
 
   &__contents-wrapper {
-    animation: message 0.15s ease-in 0s forwards;
-    opacity: 0;
+    //animation: message 0.15s ease-in 0s forwards;
+    //opacity: 0;
     display: block;
     margin-right: 16px;
     max-width: 70%;

diff --git a/src/components/message-list/message-list.tsx b/src/components/message-list/message-list.tsx
@@ -115,7 +115,9 @@ const MessageList = () => {
     [messages, messagesIds, formatDateForSeparator],
   );
 
-  useEffect(loadMore, [loadMore, selectedChatId]);
+  console.log(separatedMessagesPacks);
+
+  // useEffect(loadMore, [loadMore, selectedChatId]);
 
   if (!selectedChatId) {
     return <Welcome />;
@@ -134,47 +136,42 @@ const MessageList = () => {
           )}
 
         {selectedMessageIds.length > 0 && <SelectedMessagesData />}
-        {!areMessagesLoading || messagesIds?.length
-          ? Boolean(messagesIds?.length) && (
-              <InfiniteScroll
-                containerRef={rootRef}
-                onReachBottom={loadMore}
-                hasMore={hasMoreMessages}
-                className={`${BLOCK_NAME}__messages-list__scroll`}
-                isLoading={areMessagesLoading}>
-                {separatedMessagesPacks.map((pack) => (
-                  <div key={pack.date} className={`${BLOCK_NAME}__messages-group`}>
-                    {pack.messages.map((messageId, index) => (
-                      <MessageItem
-                        observeIntersection={observeIntersectionForMedia}
-                        selectedChatId={selectedChatId}
-                        isSelected={selectedMessageIds.includes(messageId)}
-                        messageId={messageId}
-                        key={messageId}
-                        needToShowCreator={
-                          messages &&
-                          (messages[messageId]?.userCreatorId !==
-                            messages[pack.messages[index + 1]]?.userCreatorId ||
-                            messages[pack.messages[index + 1]]?.systemMessageType !==
-                              SystemMessageType.None)
-                        }
-                      />
-                    ))}
-                    {pack.messages.length > 0 && (
-                      <div className={`${BLOCK_NAME}__separator`}>
-                        <span className={`${BLOCK_NAME}__separator-date`}>{pack.date}</span>
-                      </div>
-                    )}
-                  </div>
+        {areMessagesLoading && !messagesIds?.length ? (
+          <CenteredLoader size={LoaderSize.LARGE} />
+        ) : (
+          <InfiniteScroll
+            containerRef={rootRef}
+            onReachBottom={loadMore}
+            hasMore={hasMoreMessages}
+            className={`${BLOCK_NAME}__messages-list__scroll`}
+            isLoading={areMessagesLoading}>
+            {separatedMessagesPacks?.map((pack) => (
+              <div key={pack.date} className={`${BLOCK_NAME}__messages-group`}>
+                {pack.messages.map((messageId, index) => (
+                  <MessageItem
+                    observeIntersection={observeIntersectionForMedia}
+                    selectedChatId={selectedChatId}
+                    isSelected={selectedMessageIds.includes(messageId)}
+                    messageId={messageId}
+                    key={messageId}
+                    needToShowCreator={
+                      messages &&
+                      (messages[messageId]?.userCreatorId !==
+                        messages[pack.messages[index + 1]]?.userCreatorId ||
+                        messages[pack.messages[index + 1]]?.systemMessageType !==
+                          SystemMessageType.None)
+                    }
+                  />
                 ))}
-              </InfiniteScroll>
-            )
-          : areMessagesLoading &&
-            hasMoreMessages && (
-              <>
-                <CenteredLoader size={LoaderSize.LARGE} />
-              </>
-            )}
+                {pack.messages.length > 0 && (
+                  <div className={`${BLOCK_NAME}__separator`}>
+                    <span className={`${BLOCK_NAME}__separator-date`}>{pack.date}</span>
+                  </div>
+                )}
+              </div>
+            ))}
+          </InfiniteScroll>
+        )}
       </div>
     </div>
   );

diff --git a/src/hooks/use-intersection-observer.ts b/src/hooks/use-intersection-observer.ts
@@ -1,13 +1,16 @@
 import { useEffect, RefObject, useState, useRef, useCallback } from 'react';
 
-import throttle from 'lodash/fp/throttle';
+import debounce from 'lodash/debounce';
 import noop from 'lodash/noop';
+import throttle from 'lodash/throttle';
 
 type IntersectionObserverHook = {
   rootRef: RefObject<HTMLElement>;
   threshold?: number | number[];
   margin?: number;
   throttleMs?: number;
+  skipFirst?: boolean;
+  debounceMs?: number;
 };
 
 type TargetCallback = (entry: IntersectionObserverEntry) => void;
@@ -20,11 +23,12 @@ type IntersectionController = {
 };
 
 export function useIntersectionObserver(
-  { rootRef, threshold, margin, throttleMs }: IntersectionObserverHook,
+  { rootRef, threshold, margin, throttleMs, skipFirst, debounceMs }: IntersectionObserverHook,
   rootCallback?: RootCallback,
 ) {
   const intersectionControllerRef = useRef<IntersectionController>();
   const rootCallbackRef = useRef<RootCallback>();
+
   rootCallbackRef.current = rootCallback;
 
   useEffect(
@@ -60,17 +64,18 @@ export function useIntersectionObserver(
       entriesAccumulator.clear();
     };
 
-    const scheduler = throttleMs ? throttle : undefined;
+    const scheduler = (throttleMs && throttle) || (debounceMs && debounce) || undefined;
 
     const observerCallback = scheduler
-      ? scheduler(throttleMs as number, observerCallbackSync)
+      ? scheduler(observerCallbackSync, throttleMs || debounceMs, { leading: !skipFirst })
       : observerCallbackSync;
 
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           entriesAccumulator.set(entry.target, entry);
         });
+
         observerCallback();
       },
       {

diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
@@ -0,0 +1,30 @@
+export function debounce<F extends () => void>(
+  fn: F,
+  ms: number,
+  shouldRunFirst = true,
+  shouldRunLast = true,
+) {
+  let waitingTimeout: number | undefined;
+
+  return (...args: Parameters<F>) => {
+    if (waitingTimeout) {
+      clearTimeout(waitingTimeout);
+      waitingTimeout = undefined;
+    } else if (shouldRunFirst) {
+      // eslint-disable-next-line
+      // @ts-ignore
+      fn(...args);
+    }
+
+    // eslint-disable-next-line no-restricted-globals
+    waitingTimeout = self.setTimeout(() => {
+      if (shouldRunLast) {
+        // eslint-disable-next-line
+        // @ts-ignore
+        fn(...args);
+      }
+
+      waitingTimeout = undefined;
+    }, ms);
+  };
+}