fix: message list shouldn't get stuck loading

data/feature-flags.ts

@@ -27,7 +27,8 @@ export const featureFlags = [
       '0x016b25', // adamalix.lens
       '0x016b24', // bhavyam.lens
       '0x016b0b', // xmtplabs.lens
-      '0xf5ff' // anoopr.lens
+      '0xf5ff', // anoopr.lens
+      '0x016b2e' // kenziestokes.lens
     ]
   },
   {

src/components/Messages/Composer.tsx

@@ -8,13 +8,14 @@ import toast from 'react-hot-toast';
 
 interface Props {
   sendMessage: (message: string) => Promise<boolean>;
+  disabledInput: boolean;
 }
 
-const Composer: FC<Props> = ({ sendMessage }) => {
+const Composer: FC<Props> = ({ sendMessage, disabledInput }) => {
   const [message, setMessage] = useState<string>('');
   const [sending, setSending] = useState<boolean>(false);
 
-  const canSendMessage = !sending && message.length > 0;
+  const canSendMessage = !disabledInput && !sending && message.length > 0;
 
   const handleSend = async () => {
     if (!canSendMessage) {
@@ -42,6 +43,7 @@ const Composer: FC<Props> = ({ sendMessage }) => {
         type="text"
         placeholder="Type Something"
         value={message}
+        disabled={disabledInput}
         onKeyDown={handleKeyDown}
         onChange={(event) => setMessage(event.target.value)}
       />

src/components/Messages/Message.tsx

@@ -77,7 +77,7 @@ const Message: FC<MessageProps> = ({ conversationKey }) => {
                 hasMore={hasMore}
                 missingXmtpAuth={missingXmtpAuth ?? false}
               />
-              <Composer sendMessage={sendMessage} />
+              <Composer sendMessage={sendMessage} disabledInput={missingXmtpAuth ?? false} />
             </>
           )}
         </Card>

src/components/Messages/MessagesList.tsx

@@ -85,7 +85,7 @@ const DateDivider: FC<{ date?: Date }> = ({ date }) => (
 );
 
 const MissingXmtpAuth: FC = () => (
-  <Card as="aside" className="mb-4 border-gray-400 !bg-gray-300 !bg-opacity-20 space-y-2.5 p-5">
+  <Card as="aside" className="mb-2 mr-4 border-gray-400 !bg-gray-300 !bg-opacity-20 space-y-2.5 p-5">
     <div className="flex items-center space-x-2 font-bold">
       <EmojiSadIcon className="w-5 h-5" />
       <p>This fren hasn't enabled DMs yet</p>

src/components/utils/hooks/useGetConversation.tsx

@@ -44,7 +44,7 @@ const useGetConversation = (conversationKey: string, profile?: Profile) => {
     };
     createNewConversation();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [profile]);
+  }, [profile, conversations]);
 
   useEffect(() => {
     if (!currentProfile) {