Add loading messages button (#58)

packages/react-chat/src/components/Chat.tsx

@@ -32,7 +32,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
     notifications,
     clearNotifications,
     loadNextDay,
-    lastMessage,
   } = useMessenger(
     activeChannel.name,
     channels.map((channel) => channel.name)
@@ -68,7 +67,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         showCommunity={!showChannels}
         loadNextDay={() => loadNextDay(activeChannel.name)}
         onCommunityClick={showModal}
-        lastMessage={lastMessage}
         fetchMetadata={fetchMetadata}
       />
       {showMembers && !narrow && (

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -34,7 +34,6 @@ interface ChatBodyProps {
   activeChannelId: number;
   loadNextDay: () => void;
   onCommunityClick: () => void;
-  lastMessage: Date;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
 }
 
@@ -53,7 +52,6 @@ export function ChatBody({
   activeChannelId,
   loadNextDay,
   onCommunityClick,
-  lastMessage,
   fetchMetadata,
 }: ChatBodyProps) {
   const narrow = useNarrow();
@@ -108,9 +106,6 @@ export function ChatBody({
         <>
           {!showChannelsList && !showMembersList && (
             <>
-              <button onClick={loadNextDay}>
-                Last message date {lastMessage.toDateString()}
-              </button>{" "}
               {messages.length > 0 ? (
                 messenger ? (
                   <ChatMessages

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import { ChatMessage } from "../../models/ChatMessage";
 import { Metadata } from "../../models/Metadata";
+import { LoadingIcon } from "../Icons/LoadingIcon";
 import { UserIcon } from "../Icons/UserIcon";
 import { PictureModal } from "../Modals/PictureModal";
 import { textSmallStyles } from "../Text";
@@ -60,6 +61,9 @@ export function ChatMessages({
         onClose={() => setImage("")}
         image={image}
       />
+      <LoadingWrapper>
+        <LoadingIcon className="message" />
+      </LoadingWrapper>
       {messages.map((message, idx) => {
         return (
           <MessageOuterWrapper key={message.date.getTime()}>
@@ -101,6 +105,8 @@ export function ChatMessages({
 }
 
 const MessagesWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   height: calc(100% - 44px);
   overflow: auto;
   padding: 8px 16px 0;
@@ -184,3 +190,12 @@ const MessageText = styled.div`
   white-space: pre-wrap;
   color: ${({ theme }) => theme.primary};
 `;
+
+const LoadingWrapper = styled.div`
+  display: flex;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme }) => theme.bodyBackgroundColor};
+  position: relative;
+`;

packages/react-chat/src/components/Icons/LoadingIcon.tsx

@@ -10,12 +10,17 @@ const rotation = keyframes`
   }
 `;
 
-export const LoadingIcon = () => (
+interface LoadingIconProps {
+  className?: string;
+}
+
+export const LoadingIcon = ({ className }: LoadingIconProps) => (
   <Icon
     width="13"
     height="12"
     viewBox="0 0 13 12"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
   >
     <path
       fillRule="evenodd"
@@ -30,4 +35,10 @@ const Icon = styled.svg`
     fill: ${({ theme }) => theme.primary};
   }
   animation: ${rotation} 2s linear infinite;
+
+  &.message {
+    & > path {
+      fill: ${({ theme }) => theme.secondary};
+    }
+  }
 `;