diff --git a/renderer/components/timelines/Search.tsx b/renderer/components/timelines/Search.tsx index 26bcfcde..017a7a21 100644 --- a/renderer/components/timelines/Search.tsx +++ b/renderer/components/timelines/Search.tsx @@ -6,6 +6,7 @@ import { FaMagnifyingGlass } from 'react-icons/fa6' import { FormattedMessage, useIntl } from 'react-intl' import Statuses from './search/Statuses' import { Account } from '@/db' +import Accounts from './search/Accounts' type Props = { client: MegalodonInterface @@ -24,6 +25,7 @@ export default function Search(props: Props) { hashtags: [], statuses: [] }) + const [loading, setLoading] = useState(false) useEffect(() => { if (router.query.q) { @@ -33,14 +35,20 @@ export default function Search(props: Props) { }, [router.query.q]) const search = (query: string) => { + setLoading(true) setResults({ accounts: [], hashtags: [], statuses: [] }) - props.client.search(query).then(res => { - setResults(res.data) - }) + props.client + .search(query) + .then(res => { + setResults(res.data) + }) + .finally(() => { + setLoading(false) + }) } const submit = (ev: FormEvent) => { @@ -91,9 +99,17 @@ export default function Search(props: Props) { - + + + + - accounts hashtags diff --git a/renderer/components/timelines/search/Accounts.tsx b/renderer/components/timelines/search/Accounts.tsx new file mode 100644 index 00000000..6215db05 --- /dev/null +++ b/renderer/components/timelines/search/Accounts.tsx @@ -0,0 +1,66 @@ +import { Avatar, Spinner } from '@material-tailwind/react' +import { Entity, MegalodonInterface } from 'megalodon' +import emojify from '@/utils/emojify' +import { Virtuoso } from 'react-virtuoso' +import { useRouter } from 'next/router' + +type Props = { + client: MegalodonInterface + users: Array + loading: boolean +} + +export default function Accounts(props: Props) { + const router = useRouter() + + const openUser = (id: string) => { + router.push({ query: { id: router.query.id, timeline: router.query.timeline, user_id: id, detail: true } }) + } + + return ( + <> +
+ {props.users.length > 0 ? ( + } + /> + ) : ( + <> + {props.loading && ( +
+ +
+ )} + + )} +
+ + ) +} + +type UserProps = { + user: Entity.Account + openUser: (id: string) => void +} + +function User(props: UserProps) { + return ( +
+
props.openUser(props.user.id)}> +
+ +
+
+

+

@{props.user.acct}

+
+
+
+ ) +} diff --git a/renderer/components/timelines/search/Statuses.tsx b/renderer/components/timelines/search/Statuses.tsx index 23c7bed0..4f214dc5 100644 --- a/renderer/components/timelines/search/Statuses.tsx +++ b/renderer/components/timelines/search/Statuses.tsx @@ -8,6 +8,7 @@ type Props = { client: MegalodonInterface account: Account statuses: Array + loading: boolean openMedia: (media: Array, index: number) => void } @@ -33,9 +34,13 @@ export default function Statuses(props: Props) { )} /> ) : ( -
- -
+ <> + {props.loading && ( +
+ +
+ )} + )}