refactor convos fetching to nav components, results in faster loading

src/components/Conversations/index.jsx

@@ -1,13 +1,8 @@
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
 import Conversation from './Conversation';
-// import { swr } from '~/utils/fetchers';
-import useDidMountEffect from '~/hooks/useDidMountEffect';
 
-export default function Conversations() {
-  const [isHovering, setIsHovering] = useState(false);
-  const { conversationId } = useSelector((state) => state.convo);
-  // useDidMountEffect(() => mutate(), [conversationId]);
+export default function Conversations({ conversations, conversationId }) {
+
   // const currentRef = useRef(null);
 
   // const scrollToTop = () => {
@@ -21,31 +16,24 @@ export default function Conversations() {
   // }, [conversationId]);
 
   return (
-    <div
-      className={`-mr-2 flex-1 flex-col overflow-y-auto ${
-        isHovering ? '' : 'scrollbar-transparent'
-      } border-b border-white/20`}
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-    >
-      <div className="flex flex-col gap-2 text-sm text-gray-100">
-        {/* <div ref={currentRef} /> */}
-        {conversations &&
-          conversations.map((convo, i) => (
-            <Conversation
-              key={convo.conversationId}
-              id={convo.conversationId}
-              parentMessageId={convo.parentMessageId}
-              title={convo.title}
-              conversationId={conversationId}
-            />
-          ))}
-        {conversations && conversations.length >= 12 && (
-          <button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
-            Show more
-          </button>
-        )}
-      </div>
-    </div>
+    <>
+      {/* <div ref={currentRef} /> */}
+      {conversations &&
+        conversations.length > 0 &&
+        conversations.map((convo, i) => (
+          <Conversation
+            key={convo.conversationId}
+            id={convo.conversationId}
+            parentMessageId={convo.parentMessageId}
+            title={convo.title}
+            conversationId={conversationId}
+          />
+        ))}
+      {conversations && conversations.length >= 12 && (
+        <button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
+          Show more
+        </button>
+      )}
+    </>
   );
 }

src/components/Nav/index.jsx

@@ -1,10 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import NewChat from './NewChat';
+import Spinner from '../svg/Spinner';
 import Conversations from '../Conversations';
 import NavLinks from './NavLinks';
+import useDidMountEffect from '~/hooks/useDidMountEffect';
+import { swr } from '~/utils/fetchers';
+import { useSelector } from 'react-redux';
 
 export default function Nav() {
+  const [isHovering, setIsHovering] = useState(false);
   const { conversationId } = useSelector((state) => state.convo);
+  const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
+
+  useDidMountEffect(() => mutate(), [conversationId]);
 
   return (
     <div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
@@ -12,7 +20,17 @@ export default function Nav() {
         <div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
           <nav className="flex h-full flex-1 flex-col space-y-1 p-2">
             <NewChat />
-            <Conversations />
+            <div
+              className={`-mr-2 flex-1 flex-col overflow-y-auto ${
+                isHovering ? '' : 'scrollbar-transparent'
+              } border-b border-white/20`}
+              onMouseEnter={() => setIsHovering(true)}
+              onMouseLeave={() => setIsHovering(false)}
+            >
+              <div className="flex flex-col gap-2 text-sm text-gray-100">
+                {!!isLoading ? <Spinner /> : <Conversations conversations={data} conversationId={conversationId}/>}
+              </div>
+            </div>
             <NavLinks />
           </nav>
         </div>

src/components/svg/Spinner.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+export default function Spinner() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="m-auto animate-spin text-center"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="12"
+        y1="2"
+        x2="12"
+        y2="6"
+      />
+      <line
+        x1="12"
+        y1="18"
+        x2="12"
+        y2="22"
+      />
+      <line
+        x1="4.93"
+        y1="4.93"
+        x2="7.76"
+        y2="7.76"
+      />
+      <line
+        x1="16.24"
+        y1="16.24"
+        x2="19.07"
+        y2="19.07"
+      />
+      <line
+        x1="2"
+        y1="12"
+        x2="6"
+        y2="12"
+      />
+      <line
+        x1="18"
+        y1="12"
+        x2="22"
+        y2="12"
+      />
+      <line
+        x1="4.93"
+        y1="19.07"
+        x2="7.76"
+        y2="16.24"
+      />
+      <line
+        x1="16.24"
+        y1="7.76"
+        x2="19.07"
+        y2="4.93"
+      />
+    </svg>
+  );
+}