diff --git a/packages/web/components/elements/icons/ConfusedSlothIcon.tsx b/packages/web/components/elements/icons/ConfusedSlothIcon.tsx
new file mode 100644
index 000000000..a75126e97
--- /dev/null
+++ b/packages/web/components/elements/icons/ConfusedSlothIcon.tsx
@@ -0,0 +1,317 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { isDarkTheme } from '../../../lib/themeUpdater'
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export function ConfusedSlothIcon(): JSX.Element {
+ const isDark = isDarkTheme()
+ return isDark ? :
+}
+
+class ConfusedSlothIconDark extends React.Component {
+ render() {
+ return (
+
+ )
+ }
+}
+
+class ConfusedSlothIconLight extends React.Component {
+ render() {
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/elements/icons/ErrorSlothIcon.tsx b/packages/web/components/elements/icons/ErrorSlothIcon.tsx
new file mode 100644
index 000000000..da38bf6d5
--- /dev/null
+++ b/packages/web/components/elements/icons/ErrorSlothIcon.tsx
@@ -0,0 +1,262 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { useCurrentTheme } from '../../../lib/hooks/useCurrentTheme'
+import { useDarkModeListener } from '../../../lib/hooks/useDarkModeListener'
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export function ErrorSlothIcon(): JSX.Element {
+ const isDarkMode = useDarkModeListener()
+ return isDarkMode ? :
+}
+
+class ErrorSlothIconDark extends React.Component {
+ render() {
+ return (
+
+ )
+ }
+}
+
+class ErrorSlothIconLight extends React.Component {
+ render() {
+ return (
+
+ )
+ }
+}
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index 65ff189a6..bcf43895b 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -41,7 +41,7 @@ export type HeaderDropdownAction =
| 'logout'
type TriggerButtonProps = {
- name: string
+ name?: string
}
const TriggerButton = (props: TriggerButtonProps): JSX.Element => {
@@ -60,7 +60,7 @@ const TriggerButton = (props: TriggerButtonProps): JSX.Element => {
},
}}
>
-
+
{
whiteSpace: 'nowrap',
}}
>
- {props.name}
+ {props.name ?? 'Settings'}
)
@@ -124,15 +124,11 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
[router]
)
- if (!viewerData?.me) {
- return <>
- }
-
return (
+ props.children ??
}
css={{ width: '240px', ml: '15px' }}
>
@@ -153,7 +149,7 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
}}
>
@@ -162,7 +158,7 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
alignment="start"
distribution="around"
>
- {viewerData.me && (
+ {viewerData?.me && (
<>
{
},
}}
>
+
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index f64700bca..ad17ee396 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -49,6 +49,8 @@ import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutati
import { articleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
import { PinnedButtons } from './PinnedButtons'
import { PinnedSearch } from '../../../pages/settings/pinned-searches'
+import { ErrorSlothIcon } from '../../elements/icons/ErrorSlothIcon'
+import { DEFAULT_HEADER_HEIGHT } from './HeaderSpacer'
export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
export type LibraryMode = 'reads' | 'highlights'
@@ -109,8 +111,11 @@ export function HomeFeedContainer(): JSX.Element {
isValidating,
performActionOnItem,
mutate,
+ error: fetchItemsError,
} = useGetLibraryItemsQuery(queryInputs)
+ console.log('fetchItemsError: ', fetchItemsError)
+
useEffect(() => {
const handleRevalidate = () => {
;(async () => {
@@ -856,6 +861,7 @@ export function HomeFeedContainer(): JSX.Element {
hasData={!!itemsPages}
totalItems={itemsPages?.[0].search.pageInfo.totalCount || 0}
isValidating={isValidating}
+ fetchItemsError={!!fetchItemsError}
labelsTarget={labelsTarget}
setLabelsTarget={setLabelsTarget}
notebookTarget={notebookTarget}
@@ -880,6 +886,51 @@ export function HomeFeedContainer(): JSX.Element {
)
}
+const FetchItemsError = (): JSX.Element => {
+ return (
+
+
+
+ Something has gone wrong.
+
+
+ We have encountered unexpected problems.{' '}
+ Get help
+
+
+ )
+}
+
export type HomeFeedContentProps = {
items: LibraryItem[]
searchTerm?: string
@@ -890,6 +941,8 @@ export type HomeFeedContentProps = {
hasData: boolean
totalItems: number
isValidating: boolean
+ fetchItemsError: boolean
+
loadMore: () => void
labelsTarget: LibraryItem | undefined
setLabelsTarget: (target: LibraryItem | undefined) => void
@@ -1001,24 +1054,31 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
setShowFilterMenu={setShowFilterMenu}
/>
)}
- {!props.isValidating && props.mode == 'highlights' && (
-
- )}
- {props.mode == 'reads' && (
-
- )}
+ {props.fetchItemsError && }
+
+ {!props.isValidating &&
+ !props.fetchItemsError &&
+ props.mode == 'highlights' && (
+
+ )}
+
+ {!props.isValidating &&
+ !props.fetchItemsError &&
+ props.mode == 'reads' && (
+
+ )}
{props.showAddLinkModal && (
number)
@@ -447,5 +448,6 @@ export function useGetLibraryItemsQuery({
size,
setSize,
mutate,
+ error: !!error,
}
}