diff --git a/build/index.html b/build/index.html index a63a22154..4991f8cbd 100644 --- a/build/index.html +++ b/build/index.html @@ -22,8 +22,8 @@ Learn how to configure a non-root public URL by running `npm run build`. --> Second Brain - - + + diff --git a/src/components/App/MainToolbar/index.tsx b/src/components/App/MainToolbar/index.tsx index d20db4091..10183a376 100644 --- a/src/components/App/MainToolbar/index.tsx +++ b/src/components/App/MainToolbar/index.tsx @@ -66,10 +66,9 @@ export const MainToolbar = () => { const Wrapper = styled(Flex).attrs({ align: 'flex-start', direction: 'column', - grow: 1, justify: 'flex-start', })` - width: 64px; + flex: 0 0 64px; z-index: 31; transition: opacity 1s; background: ${colors.BG2}; diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx index f00070a6d..41b776fa1 100644 --- a/src/components/App/SideBar/index.tsx +++ b/src/components/App/SideBar/index.tsx @@ -9,6 +9,7 @@ import { useDataStore, useSelectedNode } from '~/stores/useDataStore' import { colors } from '~/utils/colors' import clsx from 'clsx' import { ClipLoader } from 'react-spinners' +import { FetchLoaderText } from '~/components/common/Loader' import { useGraphData } from '~/components/DataRetriever' import ChevronLeftIcon from '~/components/Icons/ChevronLeftIcon' import ClearIcon from '~/components/Icons/ClearIcon' @@ -88,13 +89,19 @@ const Content = forwardRef(({ onSubmit, subViewOpen {searchTerm && ( -
- {data.nodes.length} - results -
-
- -
+ {isLoading ? ( + + ) : ( + <> +
+ {data.nodes.length} + results +
+
+ +
+ + )} )} diff --git a/src/components/SourcesTableModal/SourcesView/Sources/index.tsx b/src/components/SourcesTableModal/SourcesView/Sources/index.tsx index 1d9152436..a14294858 100644 --- a/src/components/SourcesTableModal/SourcesView/Sources/index.tsx +++ b/src/components/SourcesTableModal/SourcesView/Sources/index.tsx @@ -23,6 +23,9 @@ import Table from './Table' const admins = [ '02c431e64078b10925584d64824c9d1d12eca05e2c56660ffa5ac84aa6946adfe5', '03a9a8d953fe747d0dd94dd3c567ddc58451101e987e2d2bf7a4d1e10a2c89ff38', + '024efa31d1e4f98bccc415b222c9d971866013ad6f95f7d1ed9e8be8e3355a36ff', + '03bfe6723c06fb2b7546df1e8ca1a17ae5c504615da32c945425ccbe8d3ca6260d', + '024efa31d1e4f98bccc415b222c9d971866013ad6f95f7d1ed9e8be8e3355a36ff', ] export const Sources = () => { diff --git a/src/components/Universe/Graph/Icons/index.tsx b/src/components/Universe/Graph/Icons/index.tsx deleted file mode 100644 index f7ff9c50e..000000000 --- a/src/components/Universe/Graph/Icons/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Float, Text } from '@react-three/drei' -import { useFrame } from '@react-three/fiber' -import { useRef } from 'react' -import { FetchLoaderText } from '~/components/common/Loader' - -const spin = 8 - -export const GraphLoadingIcon = () => { - const ref = useRef(null) - const textRef = useRef(null) - - useFrame(({ camera }, delta) => { - if (ref.current) { - ref.current.rotation.z += spin * delta - } - - if (textRef.current) { - textRef.current.quaternion.copy(camera.quaternion) - } - }) - - return ( - <> - - - {FetchLoaderText()} - - - - - - - - ) -} diff --git a/src/components/Universe/Graph/index.tsx b/src/components/Universe/Graph/index.tsx index 0c1e7f66d..8a7e95c2f 100644 --- a/src/components/Universe/Graph/index.tsx +++ b/src/components/Universe/Graph/index.tsx @@ -5,7 +5,6 @@ import { useDataStore } from '~/stores/useDataStore' import { GraphData } from '~/types' import { Cubes } from './Cubes' import { Earth } from './Earth' -import { GraphLoadingIcon } from './Icons' import { Particles } from './Particles' import { Segment } from './Segment' import { NodeDetailsPanel } from './UI' @@ -29,7 +28,7 @@ export const Graph = () => { }, [showSelectionGraph, graphStyle]) if (isLoading) { - return + return null } return ( diff --git a/src/components/Universe/Preloader/index.tsx b/src/components/Universe/Preloader/index.tsx index 112f11db4..1ed0448b6 100644 --- a/src/components/Universe/Preloader/index.tsx +++ b/src/components/Universe/Preloader/index.tsx @@ -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 = () => ( - - - -) +type Props = { + fullSize?: boolean +} + +export const Preloader = ({ fullSize = true }: Props) => { + const sidebarIsOpen = useAppStore((s) => s.sidebarIsOpen) + + return ( + + + + ) +} 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; + } + } ` diff --git a/src/components/Universe/index.tsx b/src/components/Universe/index.tsx index f71d364d4..6bd466d20 100644 --- a/src/components/Universe/index.tsx +++ b/src/components/Universe/index.tsx @@ -7,21 +7,25 @@ import { useControls } from 'leva' import { BlendFunction, Resolution } from 'postprocessing' import { Perf } from 'r3f-perf' import { Suspense, memo, useCallback, useMemo } from 'react' +import styled from 'styled-components' import { getNodeColorByType } from '~/components/Universe/Graph/constant' import { isDevelopment } from '~/constants' import { useControlStore } from '~/stores/useControlStore' -import { useSelectedNode } from '~/stores/useDataStore' +import { useDataStore, useSelectedNode } from '~/stores/useDataStore' import { colors } from '~/utils/colors' import { addToGlobalForE2e } from '~/utils/tests' +import { Flex } from '../common/Flex' import { Controls } from './Controls' import { initialCameraPosition } from './Controls/CameraAnimations/constants' import { Graph } from './Graph' import { Lights } from './Lights' import { Overlay } from './Overlay' +import { Preloader } from './Preloader' import { outlineEffectColor } from './constants' const Fallback = () => ( + ) @@ -89,6 +93,8 @@ const _Universe = () => { useControlStore((s) => s.setUserMovedCamera), ] + const isLoading = useDataStore((s) => s.isFetching) + const onWheelHandler = useCallback( (e: React.WheelEvent) => { const { target } = e @@ -119,13 +125,11 @@ const _Universe = () => { const onCreatedHandler = useCallback((s: RootState) => addToGlobalForE2e(s, 'threeState'), []) return ( - <> + - {isDevelopment && } - }> @@ -137,8 +141,32 @@ const _Universe = () => { - + {isLoading && } + ) } +const Wrapper = styled(Flex)` + flex: 1 0 100%; + position: relative; +` + +const MyLoader = styled(Flex)` + background: ${colors.black}; + width: 100%; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + align-items: center; + justify-content: center; + + &.sidebar-is-open { + .span { + margin-left: -390px; + } + } +` + export const Universe = memo(_Universe) diff --git a/src/components/common/Loader/index.tsx b/src/components/common/Loader/index.tsx index 8dba6ef31..4a59ba45d 100644 --- a/src/components/common/Loader/index.tsx +++ b/src/components/common/Loader/index.tsx @@ -1,24 +1,21 @@ +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(() => { @@ -26,40 +23,47 @@ export const Loader = ({ color = 'white' }: Props) => { 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 ( - - - - {messages[msgIndex]}... - - - - - - - + + {messages.map((i, index) => ( + +
{i[0]}
+
{i[1]}
+
+ +
+ + ))} + ) } -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}; + } +` diff --git a/src/network/fetchGraphData/index.ts b/src/network/fetchGraphData/index.ts index ffe929d62..823715fd5 100644 --- a/src/network/fetchGraphData/index.ts +++ b/src/network/fetchGraphData/index.ts @@ -321,24 +321,7 @@ const getGraphData = async (searchterm: string) => { try { const dataInit = await fetchNodes(searchterm) - const dataSeries = dataInit.data_series - ? [ - { - ...dataInit.data_series, - x: 0, - y: 0, - z: 0, - boost: null, - image_url: 'node_data.webp', - label: dataInit.data_series.title, - name: 'Name', - node_type: 'data_series', - ref_id: '', - type: 'data_series', - weight: 2, - } as Node, - ] - : [] + const dataSeries = Array.isArray(dataInit.data_series) ? dataInit.data_series : [] const data: Node[] = [...dataInit.exact, ...dataInit.related, ...dataSeries]