-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: closes #402 and #454 * fix: prettier * feat: adding two new admins kevkevin and Tom Smith --------- Co-authored-by: Расул <[email protected]> Co-authored-by: kevkevin <[email protected]>
- Loading branch information
3 people
authored
Oct 10, 2023
1 parent
ced7507
commit 058aafa
Showing
10 changed files
with
127 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,36 @@ | ||
| import styled from 'styled-components' | ||
| import clsx from 'clsx' | ||
| import { ClipLoader } from 'react-spinners' | ||
| import { colors } from '~/utils/colors' | ||
| import styled from 'styled-components' | ||
| import { Flex } from '~/components/common/Flex' | ||
| import { GRAPH_FOG_COLOR } from '~/constants' | ||
| import { useAppStore } from '~/stores/useAppStore' | ||
| import { colors } from '~/utils/colors' | ||
|
|
||
| export const Preloader = () => ( | ||
| <Loader align="center" justify="center"> | ||
| <ClipLoader color={GRAPH_FOG_COLOR} size={100} /> | ||
| </Loader> | ||
| ) | ||
| type Props = { | ||
| fullSize?: boolean | ||
| } | ||
|
|
||
| export const Preloader = ({ fullSize = true }: Props) => { | ||
| const sidebarIsOpen = useAppStore((s) => s.sidebarIsOpen) | ||
|
|
||
| return ( | ||
| <Loader align="center" className={clsx({ 'sidebar-is-open': sidebarIsOpen && !fullSize })} justify="center"> | ||
| <ClipLoader color={colors.SECONDARY_BLUE} size={64} /> | ||
| </Loader> | ||
| ) | ||
| } | ||
|
|
||
| const Loader = styled(Flex)` | ||
| position: fixed; | ||
| width: 100%; | ||
| height: 100vh; | ||
| position: absolute; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| top: 0; | ||
| background-color: ${colors.black}; | ||
| z-index: 1; | ||
| &.sidebar-is-open { | ||
| span { | ||
| margin-left: -390px; | ||
| } | ||
| } | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,69 @@ | ||
| import { clsx } from 'clsx' | ||
| import { useEffect, useState } from 'react' | ||
| import ClipLoader from 'react-spinners/ClipLoader' | ||
| import { BeatLoader } from 'react-spinners' | ||
| import styled from 'styled-components' | ||
| import { Flex } from '~/components/common/Flex' | ||
| import { Text } from '~/components/common/Text' | ||
| import { ColorName, colors } from '~/utils/colors' | ||
| import { colors } from '~/utils/colors' | ||
|
|
||
| const messages = [ | ||
| 'Searching Podcast Index', | ||
| 'Searching YouTube', | ||
| 'Searching Twitter Spaces', | ||
| 'Finding Transcripts', | ||
| 'Loading Audio Clips', | ||
| 'Loading Video Clips', | ||
| 'Preparing Results', | ||
| ['Searching', 'Podcast Index'], | ||
| ['Searching', 'YouTube'], | ||
| ['Searching', 'Twitter Spaces'], | ||
| ['Finding', 'Transcripts'], | ||
| ['Loading', 'Audio Clips'], | ||
| ['Loading', 'Video Clips'], | ||
| ['Preparing', 'Results'], | ||
| ] | ||
|
|
||
| type Props = { | ||
| color?: ColorName | ||
| } | ||
|
|
||
| export const Loader = ({ color = 'white' }: Props) => { | ||
| export const FetchLoaderText = () => { | ||
| const [msgIndex, setMsgIndex] = useState(0) | ||
|
|
||
| useEffect(() => { | ||
| if (msgIndex === messages.length - 1) { | ||
| return | ||
| } | ||
|
|
||
| const messageTimeout = setTimeout(() => setMsgIndex((index) => (index + 1) % messages.length), 1000) | ||
| const messageTimeout = setTimeout(() => setMsgIndex((index) => (index + 1) % messages.length), 2000) | ||
|
|
||
| // eslint-disable-next-line consistent-return | ||
| return () => clearTimeout(messageTimeout) | ||
| }, [msgIndex]) | ||
|
|
||
| return ( | ||
| <Flex align="center" grow={1} id="loader" justify="center"> | ||
| <Flex align="center" py={8}> | ||
| <Text color="primaryText1" kind="mediumBold"> | ||
| {messages[msgIndex]}... | ||
| </Text> | ||
| </Flex> | ||
|
|
||
| <Flex pt={20}> | ||
| <ClipLoader color={colors[color]} loading size={26} /> | ||
| </Flex> | ||
| </Flex> | ||
| <Wrapper direction="column"> | ||
| {messages.map((i, index) => ( | ||
| <Flex key={i[1]} className={clsx('raw-wrapper', { show: msgIndex === index })} direction="row"> | ||
| <div className={clsx('action')}>{i[0]}</div> | ||
| <div className={clsx('entity')}>{i[1]}</div> | ||
| <div> | ||
| <BeatLoader color={colors.SECONDARY_BLUE} size={2} /> | ||
| </div> | ||
| </Flex> | ||
| ))} | ||
| </Wrapper> | ||
| ) | ||
| } | ||
|
|
||
| export const FetchLoaderText = () => { | ||
| const [msgIndex, setMsgIndex] = useState(0) | ||
| const Wrapper = styled(Flex)` | ||
| overflow: hidden; | ||
| height: 20px; | ||
| position: relative; | ||
| .action { | ||
| color: ${colors.white}; | ||
| margin-right: 8px; | ||
| } | ||
| useEffect(() => { | ||
| if (msgIndex === messages.length - 1) { | ||
| return | ||
| .raw-wrapper { | ||
| height: 0; | ||
| overflow: hidden; | ||
| transition: height 0.7s ease-in-out; | ||
| align-items: flex-end; | ||
| &.show { | ||
| height: 20px; | ||
| } | ||
| } | ||
| const messageTimeout = setTimeout(() => setMsgIndex((index) => (index + 1) % messages.length), 1000) | ||
|
|
||
| // eslint-disable-next-line consistent-return | ||
| return () => clearTimeout(messageTimeout) | ||
| }, [msgIndex]) | ||
|
|
||
| return `${messages[msgIndex]}...` | ||
| } | ||
| .entity { | ||
| color: ${colors.SECONDARY_BLUE}; | ||
| } | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters