External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

perf(app): optimize loading times by using stored values of subplebbits and comments instead of fetching them multiple times

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2025-03-05 17:10:26 +01:00
parent 97a415d071
commit 8557ebb3a7
8 changed files with 72 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/boards-list/boards-list.tsx
+3 -2
View File
@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { Subplebbit, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
import { Subplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import { useDefaultSubplebbitsState, useDefaultSubplebbitTags } from '../../../hooks/use-default-subplebbits';
import useIsMobile from '../../../hooks/use-is-mobile';
import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline';
@@ -18,7 +19,7 @@ const Board = ({ subplebbit, isMobile }: { subplebbit: Subplebbit; isMobile: boo
let stats = useSubplebbitStats({ subplebbitAddress: address });
const subplebbitData = useSubplebbit({ subplebbitAddress: address });
const subplebbitData = useSubplebbitsStore((state) => state.subplebbits[address]);
const { isOffline, isOnlineStatusLoading, offlineIconClass, offlineTitle } = useIsSubplebbitOffline(subplebbitData);
const displayAddress = address && Plebbit.getShortAddress(address);
src/views/not-found/not-found.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import { HomeLogo } from '../home';
import styles from './not-found.module.css';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
const totalNotFoundImages = 2;
@@ -18,7 +18,7 @@ const NotFoundImage = () => {
const NotFound = () => {
const location = useLocation();
const subplebbitAddress = location.pathname.startsWith('/p/') ? location.pathname.split('/')[2] : '';
const subplebbit = useSubplebbit({ subplebbitAddress });
const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const { address, shortAddress } = subplebbit || {};
return (
src/views/post/post.tsx
+6 -5
View File
@@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import { useLocation, useParams } from 'react-router-dom';
import { isAllView, isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
import useIsMobile from '../../hooks/use-is-mobile';
@@ -9,7 +10,6 @@ import PostMobile from '../../components/post-mobile';
import SubplebbitDescription from '../../components/subplebbit-description';
import SubplebbitRules from '../../components/subplebbit-rules';
import styles from './post.module.css';
export interface PostProps {
index?: number;
isHidden?: boolean;
@@ -20,10 +20,11 @@ export interface PostProps {
roles?: Role[];
showAllReplies?: boolean;
showReplies?: boolean;
replies?: Comment[];
}
export const Post = ({ post, showAllReplies = false, showReplies = true }: PostProps) => {
const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
export const Post = ({ post, showAllReplies = false, showReplies = true, replies }: PostProps) => {
const subplebbit = useSubplebbitsStore((state) => state.subplebbits[post?.subplebbitAddress]);
const isMobile = useIsMobile();
let comment = post;
@@ -38,9 +39,9 @@ export const Post = ({ post, showAllReplies = false, showReplies = true }: PostP
<div className={styles.thread}>
<div className={styles.postContainer}>
{isMobile ? (
<PostMobile post={comment} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} />
<PostMobile post={comment} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} replies={replies} />
) : (
<PostDesktop post={comment} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} />
<PostDesktop post={comment} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} replies={replies} />
)}
</div>
</div>