Fix status not shown if ancestors count > 40

Plus a few perf fixes

src/app.jsx

@@ -13,6 +13,7 @@ import {
   Routes,
   useLocation,
   useNavigate,
+  useParams,
 } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -250,9 +251,11 @@ function App() {
         <Route path="/:instance?/search" element={<Search />} />
         {/* <Route path="/:anything" element={<NotFound />} /> */}
       </Routes>
-      <Routes>
-        <Route path="/:instance?/s/:id" element={<Status />} />
-      </Routes>
+      {uiState === 'default' && (
+        <Routes>
+          <Route path="/:instance?/s/:id" element={<StatusRoute />} />
+        </Routes>
+      )}
       <div>
         {isLoggedIn &&
           !snapStates.settings.shortcutsColumnsMode &&
@@ -490,4 +493,10 @@ function BackgroundService({ isLoggedIn }) {
   return null;
 }
 
+function StatusRoute() {
+  const params = useParams();
+  const { id, instance } = params;
+  return <Status id={id} instance={instance} />;
+}
+
 export { App };

src/pages/status.jsx

@@ -3,6 +3,7 @@ import './status.css';
 import { Menu, MenuDivider, MenuHeader, MenuItem } from '@szhsin/react-menu';
 import debounce from 'just-debounce-it';
 import pRetry from 'p-retry';
+import { memo } from 'preact/compat';
 import {
   useCallback,
   useEffect,
@@ -50,8 +51,8 @@ function resetScrollPosition(id) {
   delete states.scrollPositions[id];
 }
 
-function StatusPage() {
-  const { id, ...params } = useParams();
+function StatusPage(params) {
+  const { id } = params;
   const { masto, instance } = api({ instance: params.instance });
   const [searchParams, setSearchParams] = useSearchParams();
   const mediaParam = searchParams.get('media');
@@ -127,18 +128,23 @@ function StatusPage() {
       ) : (
         <Link to={closeLink} />
       )}
-      {!showMediaOnly && <StatusThread closeLink={closeLink} />}
+      {!showMediaOnly && (
+        <StatusThread
+          id={id}
+          instance={params.instance}
+          closeLink={closeLink}
+        />
+      )}
     </div>
   );
 }
 
-function StatusThread({ closeLink = '/' }) {
-  const { id, ...params } = useParams();
+function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const mediaParam = searchParams.get('media');
   const showMedia = parseInt(mediaParam, 10) > 0;
   const [viewMode, setViewMode] = useState(searchParams.get('view'));
-  const { masto, instance } = api({ instance: params.instance });
+  const { masto, instance } = api({ instance: propInstance });
   const {
     masto: currentMasto,
     instance: currentInstance,
@@ -308,6 +314,13 @@ function StatusThread({ closeLink = '/' }) {
           offsetTop: heroStatusRef.current?.offsetTop,
           scrollTop: scrollableRef.current?.scrollTop,
         };
+
+        // Set limit to hero's index
+        const heroLimit = allStatuses.findIndex((s) => s.id === id);
+        if (heroLimit >= limit) {
+          setLimit(heroLimit + 1);
+        }
+
         console.log({ allStatuses });
         setStatuses(allStatuses);
         cachedStatusesMap[id] = allStatuses;
@@ -1100,4 +1113,4 @@ function SubComments({
   );
 }
 
-export default StatusPage;
+export default memo(StatusPage);