highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-10-04 16:04:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

lazy load channel list

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-24 18:37:47 +07:00
parent 1486d1bc09
commit 8b80a08a59
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/channels/channelListItem.tsx
View File

@@ -6,7 +6,15 @@ import { usePageContext } from '@utils/hooks/usePageContext';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
export const ChannelListItem = ({ data }: { data: any }) => { export const ChannelListItem = ({ data }: { data: any }) => {
const channel: any = useChannelMetadata(data.event_id, data.metadata); let fallback: any;
if (typeof data.metadata === 'object') {
fallback = data.metadata;
} else {
fallback = JSON.parse(data.metadata);
}
const channel: any = useChannelMetadata(data.event_id, fallback);
const pageContext = usePageContext(); const pageContext = usePageContext();
const searchParams: any = pageContext.urlParsed.search; const searchParams: any = pageContext.urlParsed.search;

5
src/components/navigation.tsx
View File

@@ -1,12 +1,13 @@
import ActiveLink from '@components/activeLink'; import ActiveLink from '@components/activeLink';
import ChannelList from '@components/channels/channelList';
import ChatList from '@components/chats/chatList'; import ChatList from '@components/chats/chatList';
import { Disclosure } from '@headlessui/react'; import { Disclosure } from '@headlessui/react';
import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react'; import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
import { Suspense } from 'react'; import { Suspense, lazy } from 'react';
import Skeleton from 'react-loading-skeleton'; import Skeleton from 'react-loading-skeleton';
const ChannelList = lazy(() => import('@components/channels/channelList'));
export default function Navigation() { export default function Navigation() {
return ( return (
<div className="relative flex h-full flex-col gap-1 overflow-hidden pt-3"> <div className="relative flex h-full flex-col gap-1 overflow-hidden pt-3">

11
src/utils/hooks/useChannelMetadata.tsx
View File

@@ -7,17 +7,8 @@ import { updateChannelMetadata } from '@utils/storage';
import { useCallback, useContext, useEffect, useState } from 'react'; import { useCallback, useContext, useEffect, useState } from 'react';
export const useChannelMetadata = (id: string, fallback: any) => { export const useChannelMetadata = (id: string, fallback: any) => {
let parseFallback: any;
if (typeof fallback === 'object') {
parseFallback = fallback.metadata;
} else {
const json = JSON.parse(fallback.metadata);
parseFallback = json;
}
const pool: any = useContext(RelayContext); const pool: any = useContext(RelayContext);
const [metadata, setMetadata] = useState(parseFallback); const [metadata, setMetadata] = useState(fallback);
const fetchMetadata = useCallback(() => { const fetchMetadata = useCallback(() => {
const unsubscribe = pool.subscribe( const unsubscribe = pool.subscribe(