⏰ Better loading ux (#4205)

* Introduce offset for infinite loading

* Utilize new logic in views

* Cleanup and firefox gap fix

* Transfer change

packages/atlas/src/components/AllNftSection/AllNftSection.tsx

@@ -13,6 +13,7 @@ import { useInfiniteNftsGrid } from '@/hooks/useInfiniteNftsGrid'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { tokenNumberToHapiBn } from '@/joystream-lib/utils'
 import { DEFAULT_NFTS_GRID } from '@/styles'
+import { InfiniteLoadingOffsets } from '@/utils/loading.contants'
 
 import { NumberFormat } from '../NumberFormat'
 
@@ -184,6 +185,7 @@ export const AllNftSection = () => {
       }}
       footerProps={{
         type: 'infinite',
+        loadingTriggerOffset: InfiniteLoadingOffsets.NftTile,
         reachedEnd: !pageInfo?.hasNextPage ?? true,
         fetchMore: async () => {
           if (pageInfo?.hasNextPage) {

packages/atlas/src/components/Section/Section.styles.ts

@@ -4,6 +4,7 @@ import { media, sizes } from '@/styles'
 
 export const SectionWrapper = styled.section<{ withoutGap?: boolean }>`
   display: grid;
+  position: relative;
   gap: ${({ withoutGap }) => (withoutGap ? 0 : sizes(4))};
   ${media.sm} {
     gap: ${({ withoutGap }) => (withoutGap ? 0 : sizes(6))};

packages/atlas/src/components/Section/SectionFooter/SectionFooter.tsx

@@ -17,6 +17,7 @@ type SectionFooterLoadProps = {
   label: string
   fetchMore: () => Promise<void>
   reachedEnd: boolean
+  loadingTriggerOffset?: number
 }
 
 type SectionFooterPaginationProps = {
@@ -27,6 +28,7 @@ type SectionFooterInfiniteLoadingProps = {
   type: 'infinite'
   fetchMore: () => Promise<void>
   reachedEnd: boolean
+  loadingTriggerOffset?: number
 }
 
 export type SectionFooterProps =
@@ -35,9 +37,11 @@ export type SectionFooterProps =
   | SectionFooterPaginationProps
   | SectionFooterInfiniteLoadingProps
 
-const InfiniteLoaderMargin = styled.div`
+const InfiniteLoaderMargin = styled.div<{ loadingTriggerOffset?: number }>`
   width: 100%;
   height: 1px;
+  position: absolute;
+  bottom: ${({ loadingTriggerOffset }) => (loadingTriggerOffset ? `${loadingTriggerOffset}px` : 0)};
 `
 export const SectionFooter = (props: SectionFooterProps) => {
   const [isSwitchedToInfinite, setIsSwitchedToInfinite] = useState(false)
@@ -76,12 +80,12 @@ export const SectionFooter = (props: SectionFooterProps) => {
         {props.label}
       </Button>
     ) : (
-      <InfiniteLoaderMargin ref={ref} />
+      <InfiniteLoaderMargin ref={ref} loadingTriggerOffset={props.loadingTriggerOffset} />
     )
   }
 
   if (props.type === 'infinite' && !props.reachedEnd && !isLoading) {
-    return <InfiniteLoaderMargin ref={ref} />
+    return <InfiniteLoaderMargin ref={ref} loadingTriggerOffset={props.loadingTriggerOffset} />
   }
 
   if (props.type === 'link') {

packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts

@@ -89,7 +89,7 @@ export const StyledLink = styled(Link, { shouldForwardProp: isPropValid })<{ wit
             rgb(7 8 8 / 0.7873) 88.21%,
             rgb(7 8 8 / 0.85) 100%
           );
-          border-bottom: 32px solid ${cVar('colorCoreNeutral700Darken')};
+          box-shadow: 0 32px 0 0 ${cVar('colorCoreNeutral700Darken')};
         `}
     }
   }

packages/atlas/src/utils/loading.contants.ts

@@ -0,0 +1,7 @@
+type Items = 'VideoTile' | 'NftTile'
+
+// Value should trigger loading 1,5 tile from the bottom
+export const InfiniteLoadingOffsets: Record<Items, number> = {
+  VideoTile: 500,
+  NftTile: 600,
+}

packages/atlas/src/utils/polling.ts

@@ -1 +0,0 @@
-export const YPP_POLL_INTERVAL = 3000

packages/atlas/src/views/viewer/CategoryView/CategoryVideos.tsx

@@ -12,6 +12,7 @@ import { publicVideoFilter } from '@/config/contentFilter'
 import { absoluteRoutes } from '@/config/routes'
 import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid'
 import { DEFAULT_VIDEO_GRID } from '@/styles'
+import { InfiniteLoadingOffsets } from '@/utils/loading.contants'
 
 import { Container, FallbackContainer } from './CategoryVideos.styles'
 
@@ -67,6 +68,7 @@ export const CategoryVideos: FC<CategoryVideosProps> = ({ categoriesId }) => {
             }
           },
           type: 'infinite',
+          loadingTriggerOffset: InfiniteLoadingOffsets.VideoTile,
         }}
       />
     </Container>

packages/atlas/src/views/viewer/HomeView.tsx

@@ -10,6 +10,7 @@ import { publicVideoFilter } from '@/config/contentFilter'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid'
 import { DEFAULT_VIDEO_GRID, sizes } from '@/styles'
+import { InfiniteLoadingOffsets } from '@/utils/loading.contants'
 
 export const HomeView: FC = () => {
   const headTags = useHeadTags()
@@ -41,6 +42,7 @@ export const HomeView: FC = () => {
             return
           },
           type: 'infinite',
+          loadingTriggerOffset: InfiniteLoadingOffsets.VideoTile,
         }}
       />
     </VideoContentTemplate>