Merge pull request #4314 from omnivore-app/fix/web-top-loader

Show the top loading bar even if cached items are being displayed during load

packages/web/components/templates/article/ArticleContainer.tsx

@@ -123,21 +123,16 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     props.highlightOnRelease
   )
   // iOS app embed can overide the original margin and line height
-  const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState<
-    number | null
-  >(null)
-  const [lineHeightOverride, setLineHeightOverride] = useState<number | null>(
-    null
-  )
-  const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
-    null
-  )
-  const [highContrastTextOverride, setHighContrastTextOverride] = useState<
-    boolean | undefined
-  >(undefined)
-  const [justifyTextOverride, setJustifyTextOverride] = useState<
-    boolean | undefined
-  >(undefined)
+  const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] =
+    useState<number | null>(null)
+  const [lineHeightOverride, setLineHeightOverride] =
+    useState<number | null>(null)
+  const [fontFamilyOverride, setFontFamilyOverride] =
+    useState<string | null>(null)
+  const [highContrastTextOverride, setHighContrastTextOverride] =
+    useState<boolean | undefined>(undefined)
+  const [justifyTextOverride, setJustifyTextOverride] =
+    useState<boolean | undefined>(undefined)
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
   )
@@ -388,6 +383,8 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     )
   }, [props.article.recommendations])
 
+  console.log('props.article', props.article)
+
   return (
     <>
       <Box

packages/web/components/templates/library/LibraryContainer.tsx

@@ -122,10 +122,14 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     fetchNextPage,
     fetchPreviousPage,
     hasNextPage,
-    hasPreviousPage,
+    status,
     error: fetchItemsError,
   } = useGetLibraryItems(props.folder ?? 'home', props.folder, queryInputs)
 
+  console.log(
+    `status ${status}, isLoading: ${isLoading}, isFetching: ${isFetching}`
+  )
+
   useEffect(() => {
     if (queryValue.startsWith('#')) {
       debouncedFetchSearchResults(
@@ -370,6 +374,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
           })
           return
         }
+
         showSuccessToast(`Item deleted`, {
           position: 'bottom-right',
         })
@@ -797,33 +802,6 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     [itemsPages, multiSelectMode, checkedItems]
   )
 
-  // return (
-  //   <InfiniteScroll
-  //     dataLength={libraryItems.length}
-  //     next={fetchNextPage}
-  //     hasMore={hasNextPage}
-  //     loader={<h4>Loading...</h4>}
-  //     endMessage={
-  //       <p style={{ textAlign: 'center' }}>
-  //         <b>Yay! You have seen it all</b>
-  //       </p>
-  //     }
-  //   >
-  //     {libraryItems.map((item) => {
-  //       return (
-  //         <Box
-  //           key={item.node.id}
-  //           onClick={() => {
-  //             router.push(`/${viewerData?.profile.username}/${item.node.slug}`)
-  //           }}
-  //         >
-  //           {item.cursor}: {item.node.title}
-  //         </Box>
-  //       )
-  //     })}
-  //   </InfiniteScroll>
-  // )
-
   return (
     <HomeFeedGrid
       folder={props.folder}
@@ -856,7 +834,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
       loadMore={fetchNextPage}
       hasMore={hasNextPage ?? false}
       hasData={!!itemsPages}
-      isValidating={isLoading || isFetchingNextPage}
+      isValidating={isLoading || isFetching || isFetchingNextPage}
       fetchItemsError={!!fetchItemsError}
       labelsTarget={labelsTarget}
       setLabelsTarget={setLabelsTarget}
@@ -1050,6 +1028,8 @@ export function LibraryItemsLayout(
     isSessionStorage: false,
   })
 
+  console.log('props.isValidating: ', props.isValidating)
+
   return (
     <>
       <VStack
@@ -1154,7 +1134,7 @@ export function LibraryItemsLayout(
           </VStack>
         )}
 
-        {props.isValidating && props.items.length == 0 && <TopBarProgress />}
+        {props.isValidating && <TopBarProgress />}
         <div
           onDragEnter={(event) => {
             if (

packages/web/lib/toastHelpers.tsx

@@ -147,6 +147,7 @@ const showToastWithAction = (
 }
 
 export const showSuccessToast = (message: string, options?: ToastOptions) => {
+  console.trace('showing success toast')
   return showToast(message, '#55B938', 'success', {
     position: 'bottom-right',
     ...options,

packages/web/pages/[username]/[slug]/index.tsx

@@ -470,7 +470,6 @@ export default function Reader(): JSX.Element {
     libraryItem?.slug
   )
 
-  new Error()
   if (
     articleFetchError &&
     'message' in articleFetchError &&
@@ -480,6 +479,7 @@ export default function Reader(): JSX.Element {
     return <LoadingView />
   }
 
+  console.log('library item: ', libraryItem)
   return (
     <PrimaryLayout
       pageTestId="home-page-tag"