mirror of
https://github.com/uetchy/namae.git
synced 2025-03-16 20:20:38 +09:00
fix: show spinner when fetching suggestions
This commit is contained in:
parent
24bbfc1af4
commit
6a82963690
@ -11,7 +11,8 @@ import Suggestion from './Suggestion';
|
||||
|
||||
const Form: React.FC<{
|
||||
initialValue?: string;
|
||||
}> = ({ initialValue = '' }) => {
|
||||
useSuggestion?: boolean;
|
||||
}> = ({ initialValue = '', useSuggestion = true }) => {
|
||||
const reset = useStoreActions((actions) => actions.stats.reset);
|
||||
const navigate = useNavigate();
|
||||
const [inputValue, setInputValue] = useState(initialValue);
|
||||
@ -53,8 +54,6 @@ const Form: React.FC<{
|
||||
setSuggestionQuery(modifiedValue);
|
||||
}, [inputValue, setSuggestionQuery]);
|
||||
|
||||
const queryGiven = suggestionQuery && suggestionQuery !== '';
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputHeader>
|
||||
@ -71,7 +70,7 @@ const Form: React.FC<{
|
||||
aria-label="Search"
|
||||
/>
|
||||
</form>
|
||||
{queryGiven && !suggested ? (
|
||||
{useSuggestion && !suggested ? (
|
||||
<Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
|
||||
) : null}
|
||||
</InputContainer>
|
||||
|
@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TiArrowSync } from 'react-icons/ti';
|
||||
import { PropagateLoader } from 'react-spinners';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
sendAcceptSuggestionEvent,
|
||||
@ -22,7 +23,7 @@ import {
|
||||
|
||||
type Modifier = (word: string) => string;
|
||||
|
||||
const modifiers: Modifier[] = [
|
||||
const MODIFIERS: Modifier[] = [
|
||||
(word): string => `${capitalize(germanify(word))}`,
|
||||
(word): string => `${capitalize(word)}`,
|
||||
(word): string => njoin('Air', capitalize(word), { elision: false }),
|
||||
@ -154,19 +155,19 @@ const modifiers: Modifier[] = [
|
||||
(word): string => capitalize(word) + ' by Design',
|
||||
];
|
||||
|
||||
const fontFamilies = [
|
||||
const FONT_FAMILIES = [
|
||||
`'Helvetica', sans-serif`,
|
||||
`'Avenir', sans-serif`,
|
||||
`'Futura', sans-serif`,
|
||||
`'Montserrat', sans-serif`,
|
||||
];
|
||||
|
||||
const fontWeight = [300, 600, 900];
|
||||
const FONT_WEIGHTS = [300, 600, 900];
|
||||
|
||||
const numSuggestion = 3;
|
||||
const NUM_SUGGESTION = 3;
|
||||
|
||||
function modifyWord(word: string): string {
|
||||
return sample(modifiers)(word);
|
||||
return sample(MODIFIERS)(word);
|
||||
}
|
||||
|
||||
async function getSynonyms(word: string): Promise<string[]> {
|
||||
@ -206,7 +207,7 @@ const Suggestion: React.FC<{
|
||||
function shuffle(): void {
|
||||
const best = sampleMany(
|
||||
[...synonymRef.current.filter((s) => s.length < 8), ...times(query, 10)],
|
||||
numSuggestion
|
||||
NUM_SUGGESTION
|
||||
).map((word) => modifyWord(word));
|
||||
setBestWords(best);
|
||||
}
|
||||
@ -223,6 +224,7 @@ const Suggestion: React.FC<{
|
||||
|
||||
useEffect(() => {
|
||||
let isEffective = true;
|
||||
|
||||
const fn = async (): Promise<void> => {
|
||||
if (query && query.length > 0) {
|
||||
const synonyms = await getSynonyms(query);
|
||||
@ -243,13 +245,14 @@ const Suggestion: React.FC<{
|
||||
return (
|
||||
<Container>
|
||||
<Title>{t('try')}</Title>
|
||||
|
||||
{bestWords.length > 0 ? (
|
||||
<Items>
|
||||
{bestWords &&
|
||||
bestWords.map((name, i) => (
|
||||
{bestWords.map((name, i) => (
|
||||
<Item
|
||||
style={{
|
||||
fontFamily: sample(fontFamilies),
|
||||
fontWeight: sample(fontWeight),
|
||||
fontFamily: sample(FONT_FAMILIES),
|
||||
fontWeight: sample(FONT_WEIGHTS),
|
||||
}}
|
||||
key={name + i}
|
||||
onClick={(): void => applyQuery(name)}
|
||||
@ -257,8 +260,21 @@ const Suggestion: React.FC<{
|
||||
>
|
||||
<span>{name}</span>
|
||||
</Item>
|
||||
))}
|
||||
))}{' '}
|
||||
</Items>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
height: '50px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<PropagateLoader size={10} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button onClick={onShuffleButtonClicked}>
|
||||
<TiArrowSync />
|
||||
</Button>
|
||||
|
@ -15,7 +15,7 @@ export default function Home() {
|
||||
</Helmet>
|
||||
|
||||
<Header>
|
||||
<Form />
|
||||
<Form useSuggestion={false} />
|
||||
</Header>
|
||||
|
||||
<Content>
|
||||
|
Loading…
x
Reference in New Issue
Block a user