minor updates

next.config.js

@@ -9,6 +9,9 @@ module.exports = removeImports({
   typescript: {
     ignoreBuildErrors: true,
   },
+  experimental: {
+    scrollRestoration: true,
+  },
   webpack: (config) => {
     config.experiments = { ...config.experiments, topLevelAwait: true };
     return config;

src/components/navigatorBar/index.tsx

@@ -12,7 +12,6 @@ export default function NavigatorBar() {
 
   return (
     <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">
-      {/* main */}
       <div className="flex flex-col gap-4">
         {/* Create post */}
         <div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
@@ -66,17 +65,3 @@ export default function NavigatorBar() {
     </div>
   );
 }
-
-/* Channels
-<div className="flex flex-col gap-2">
-  <div className="flex items-center justify-between px-2">
-    <h3 className="text-sm font-bold text-zinc-400">Channels</h3>
-    <button
-      type="button"
-      className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900">
-      <PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-100" />
-    </button>
-  </div>
-  <div></div>
-</div>
-*/

src/components/note/connector.tsx

@@ -6,7 +6,7 @@ import { dateToUnix, hoursAgo } from '@utils/getDate';
 
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
-import { memo, useCallback, useContext, useEffect } from 'react';
+import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 export const NoteConnector = memo(function NoteConnector({
   setParentReload,
@@ -23,6 +23,17 @@ export const NoteConnector = memo(function NoteConnector({
   const [follows]: any = useLocalStorage('follows');
   const [relays]: any = useLocalStorage('relays');
 
+  const [reload, setReload] = useState(false);
+  const timeout = useRef(null);
+
+  const reloadNewsfeed = () => {
+    setParentReload(true);
+    setReload(true);
+    timeout.current = setTimeout(() => {
+      setReload(false);
+    }, 2000);
+  };
+
   const insertDB = useCallback(
     async (event: any) => {
       await db.execute(
@@ -46,12 +57,12 @@ export const NoteConnector = memo(function NoteConnector({
       ],
       relays,
       (event: any) => {
-        // insert event to local database
-        insertDB(event).catch(console.error);
         // show trigger update newer event
         if (event.created_at > dateToUnix(currentDate)) {
           setHasNewNote(true);
         }
+        // insert event to local database
+        insertDB(event).catch(console.error);
       },
       undefined,
       (events: any, relayURL: any) => {
@@ -62,6 +73,10 @@ export const NoteConnector = memo(function NoteConnector({
 
   useEffect(() => {
     fetchEvent();
+
+    return () => {
+      clearTimeout(timeout.current);
+    };
   }, [fetchEvent]);
 
   return (
@@ -70,7 +85,7 @@ export const NoteConnector = memo(function NoteConnector({
         <h3 className="text-sm font-semibold text-zinc-500"># following</h3>
       </div>
       <div className="flex items-center gap-2">
-        <button onClick={() => setParentReload(true)} className="rounded-full p-1 hover:bg-zinc-800">
+        <button onClick={() => reloadNewsfeed()} className={`${reload ? 'animate-spin' : ''} rounded-full p-1 hover:bg-zinc-800`}>
           <ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
         </button>
         <div className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-800 px-2.5 py-1">

src/pages/feed/following.tsx

@@ -97,7 +97,7 @@ export default function Page() {
         endReached={loadMore}
         overscan={800}
         increaseViewportBy={1000}
-        className="scrollbar-hide relative h-full w-full"
+        className="relative h-full w-full"
         style={{
           contain: 'strict',
         }}