From 688eae3e4d362ddae26edd4fa0721d0adb27593b Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Fri, 24 Sep 2021 18:50:32 +0700 Subject: [PATCH 01/18] docs: add basic sections to use-infinite-loader readme affects: @react-hook-window/use-infinite-loader, @react-hook-window/use-windowed-list --- packages/use-infinite-loader/README.md | 32 +++++++++++++++++++++++++- packages/use-windowed-list/README.md | 2 +- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/packages/use-infinite-loader/README.md b/packages/use-infinite-loader/README.md index 886fa7c..16f6a10 100644 --- a/packages/use-infinite-loader/README.md +++ b/packages/use-infinite-loader/README.md @@ -1,3 +1,33 @@ # `use-infinite-loader` -React hook to manage infinite loading of windoed list items. +React hook to manage infinite loading of a windowed list items. + +## Getting started + +Install with Yarn: + +```bash +yarn add @react-hook-window/use-infinite-loader +``` + +Install with NPM: + +```bash +npm install @react-hook-window/use-infinite-loader --save +``` + +## Usage + +Consider an infinite loading list with an unknown items count. You can see such lists in a social network feeds like Instagram, Facebook, YouTube, etc. That case is a literal infinite loader, where an application can pre-render the loading interface while the next chunk is loading. + +```tsx +interface UserPost { + id: string + title: string + content: string +} + +const FaceTubeFeed: React.VFC<{ + loadNextPage(): void +}> = () => {} +``` diff --git a/packages/use-windowed-list/README.md b/packages/use-windowed-list/README.md index 5a282ca..ab11279 100644 --- a/packages/use-windowed-list/README.md +++ b/packages/use-windowed-list/README.md @@ -1,6 +1,6 @@ # use-windowed-list -React hook to render only the visible items in a container. +React hook to render only visible items in a container. ## Getting Started From 11c5e6d86d3c0b8983561c1354257f22d7542acb Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Sat, 25 Sep 2021 13:20:11 +0700 Subject: [PATCH 02/18] chore: rename use-infinite-loader to use-items-loader affects: @react-hook-window/use-items-loader, sandbox BREAKING CHANGE: It replaces use-infinite-loader with use-items-loader --- README.md | 4 ++-- package.json | 4 ++-- .../{use-infinite-loader => use-items-loader}/README.md | 8 ++++---- .../package.json | 2 +- .../src/calc-unloaded-ranges.ts | 0 .../src/index.ts | 6 +++--- .../tests/calc-unloaded-ranges.test.ts | 0 .../tsconfig.json | 0 .../tsconfig.prod.json | 0 rollup.config.js | 2 +- sandbox/package.json | 2 +- sandbox/src/InfiniteLoaderDemo.tsx | 8 ++++---- 12 files changed, 18 insertions(+), 18 deletions(-) rename packages/{use-infinite-loader => use-items-loader}/README.md (72%) rename packages/{use-infinite-loader => use-items-loader}/package.json (92%) rename packages/{use-infinite-loader => use-items-loader}/src/calc-unloaded-ranges.ts (100%) rename packages/{use-infinite-loader => use-items-loader}/src/index.ts (89%) rename packages/{use-infinite-loader => use-items-loader}/tests/calc-unloaded-ranges.test.ts (100%) rename packages/{use-infinite-loader => use-items-loader}/tsconfig.json (100%) rename packages/{use-infinite-loader => use-items-loader}/tsconfig.prod.json (100%) diff --git a/README.md b/README.md index 7636c3d..fcb83a6 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,12 @@ The monorepo for react-hook-window project. It contains: - [`@react-hook-window/use-windowed-list`][use-windowed-list] - React hook to render only the visible items in a container. -- [`@react-hook-window/use-infinite-loader`][use-infinite-loader] - React hook to manage infinite loading of windoed list items. +- [`@react-hook-window/use-items-loader`][use-items-loader] - React hook to manage infinite loading of windowed list items. [use-windowed-list]: /packages/use-windowed-list -[use-infinite-loader]: /packages/use-infinite-loader +[use-items-loader]: /packages/use-items-loader [lerna]: https://lerna.js.org/ [commitizen]: http://commitizen.github.io/cz-cli diff --git a/package.json b/package.json index 8cb1d34..b3a45f0 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "prebootstrap": "yarn build", "bootstrap": "yarn lerna bootstrap", "clean:use-windowed-list": "yarn workspace @react-hook-window/use-windowed-list clean", - "clean:use-infinite-loader": "yarn workspace @react-hook-window/use-infinite-loader clean", - "clean": "yarn clean:use-windowed-list && yarn clean:use-infinite-loader", + "clean:use-items-loader": "yarn workspace @react-hook-window/use-items-loader clean", + "clean": "yarn clean:use-windowed-list && yarn clean:use-items-loader", "prebuild": "yarn run clean", "build": "rollup --config", "test": "jest ./tests", diff --git a/packages/use-infinite-loader/README.md b/packages/use-items-loader/README.md similarity index 72% rename from packages/use-infinite-loader/README.md rename to packages/use-items-loader/README.md index 16f6a10..5fa06ca 100644 --- a/packages/use-infinite-loader/README.md +++ b/packages/use-items-loader/README.md @@ -1,19 +1,19 @@ -# `use-infinite-loader` +# `use-items-loader` -React hook to manage infinite loading of a windowed list items. +React hook to manage pagination or infinite loading of a windowed list items. ## Getting started Install with Yarn: ```bash -yarn add @react-hook-window/use-infinite-loader +yarn add @react-hook-window/use-items-loader ``` Install with NPM: ```bash -npm install @react-hook-window/use-infinite-loader --save +npm install @react-hook-window/use-items-loader --save ``` ## Usage diff --git a/packages/use-infinite-loader/package.json b/packages/use-items-loader/package.json similarity index 92% rename from packages/use-infinite-loader/package.json rename to packages/use-items-loader/package.json index 95f6e6e..d851392 100644 --- a/packages/use-infinite-loader/package.json +++ b/packages/use-items-loader/package.json @@ -1,5 +1,5 @@ { - "name": "@react-hook-window/use-infinite-loader", + "name": "@react-hook-window/use-items-loader", "version": "0.0.0", "repository": "git@github.com:owanturist/react-hook-window.git", "author": "Anton Ovechkin ", diff --git a/packages/use-infinite-loader/src/calc-unloaded-ranges.ts b/packages/use-items-loader/src/calc-unloaded-ranges.ts similarity index 100% rename from packages/use-infinite-loader/src/calc-unloaded-ranges.ts rename to packages/use-items-loader/src/calc-unloaded-ranges.ts diff --git a/packages/use-infinite-loader/src/index.ts b/packages/use-items-loader/src/index.ts similarity index 89% rename from packages/use-infinite-loader/src/index.ts rename to packages/use-items-loader/src/index.ts index 6b56f7e..25348cd 100644 --- a/packages/use-infinite-loader/src/index.ts +++ b/packages/use-items-loader/src/index.ts @@ -7,7 +7,7 @@ export interface LoadingItemsRange { loadCount: number } -export interface UseInfiniteLoaderOptions { +export interface UseItemsLoaderOptions { isScrolling: boolean overscanFromIndex: number overscanBeforeIndex: number @@ -15,13 +15,13 @@ export interface UseInfiniteLoaderOptions { loadItemsRange(range: LoadingItemsRange): void } -export const useInfiniteLoader = ({ +export const useItemsLoader = ({ isScrolling, overscanFromIndex, overscanBeforeIndex, shouldLoadItem, loadItemsRange -}: UseInfiniteLoaderOptions): void => { +}: UseItemsLoaderOptions): void => { useEffect(() => { if (isScrolling) { return diff --git a/packages/use-infinite-loader/tests/calc-unloaded-ranges.test.ts b/packages/use-items-loader/tests/calc-unloaded-ranges.test.ts similarity index 100% rename from packages/use-infinite-loader/tests/calc-unloaded-ranges.test.ts rename to packages/use-items-loader/tests/calc-unloaded-ranges.test.ts diff --git a/packages/use-infinite-loader/tsconfig.json b/packages/use-items-loader/tsconfig.json similarity index 100% rename from packages/use-infinite-loader/tsconfig.json rename to packages/use-items-loader/tsconfig.json diff --git a/packages/use-infinite-loader/tsconfig.prod.json b/packages/use-items-loader/tsconfig.prod.json similarity index 100% rename from packages/use-infinite-loader/tsconfig.prod.json rename to packages/use-items-loader/tsconfig.prod.json diff --git a/rollup.config.js b/rollup.config.js index 19f7469..b662692 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -136,7 +136,7 @@ export default [ umdName: 'useWindowedList' }), ...makeConfig({ - root: path.resolve(__dirname, 'packages/use-infinite-loader'), + root: path.resolve(__dirname, 'packages/use-items-loader'), umdName: 'useWindowedList' }) ] diff --git a/sandbox/package.json b/sandbox/package.json index 5cd1e81..5db6d4a 100644 --- a/sandbox/package.json +++ b/sandbox/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@react-hook-window/use-windowed-list": "*", - "@react-hook-window/use-infinite-loader": "*", + "@react-hook-window/use-items-loader": "*", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", diff --git a/sandbox/src/InfiniteLoaderDemo.tsx b/sandbox/src/InfiniteLoaderDemo.tsx index 22c8996..48d9f73 100644 --- a/sandbox/src/InfiniteLoaderDemo.tsx +++ b/sandbox/src/InfiniteLoaderDemo.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { useWindowedList } from '@react-hook-window/use-windowed-list' -import { useInfiniteLoader } from '@react-hook-window/use-infinite-loader' +import { useItemsLoader } from '@react-hook-window/use-items-loader' const loadRange = ( start: number, @@ -84,7 +84,7 @@ const InfiniteRangeLoaderDemo = React.memo(() => { itemCount: 1000 }) - useInfiniteLoader({ + useItemsLoader({ isScrolling, overscanFromIndex, overscanBeforeIndex, @@ -147,7 +147,7 @@ const InfinitePagedLoaderDemo = React.memo(() => { itemCount: 1000 }) - useInfiniteLoader({ + useItemsLoader({ isScrolling, overscanFromIndex, overscanBeforeIndex, @@ -196,7 +196,7 @@ const UndefinitePagedLoaderDemo = React.memo(() => { itemCount: items.length + 1 }) - useInfiniteLoader({ + useItemsLoader({ isScrolling, overscanFromIndex, overscanBeforeIndex, From b8fbbe6e6feb48d0d228b557eff3e21b99d15cc4 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Sat, 25 Sep 2021 15:21:47 +0700 Subject: [PATCH 03/18] docs: add "Infinite loading usage" section affects: @react-hook-window/use-items-loader, sandbox --- packages/use-items-loader/README.md | 233 ++++++++++++++++++++++++- packages/use-items-loader/src/index.ts | 8 +- sandbox/src/InfiniteLoaderDemo.tsx | 6 +- 3 files changed, 234 insertions(+), 13 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 5fa06ca..50c19ae 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -16,18 +16,239 @@ Install with NPM: npm install @react-hook-window/use-items-loader --save ``` -## Usage +## Infinite loading usage -Consider an infinite loading list with an unknown items count. You can see such lists in a social network feeds like Instagram, Facebook, YouTube, etc. That case is a literal infinite loader, where an application can pre-render the loading interface while the next chunk is loading. +Consider a social network feed like one in Instagram, Facebook, YouTube, etc. That case is an infinite loading list, where an application can always render a loading placeholder while the next page is loading. As soon as the loading placeholder becomes visible the app starts the next page loading. + +
+ + Show an infinite loading illustration. + + +
+ +Consider page size equal to 3 items. + +``` +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ +┃│ LOADING │┃ ┃│ #0 │┃ │ #0 │ +┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ +┃└──────────────────┘┃ first ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┃ ┃ page ┃│ #1 │┃ scroll ┃│ #1 │┃ +┃ ┃ ┃│ │┃ down ┃│ │┃ +┃ ┃ ▶ ┃├──────────────────┤┃ ┃├──────────────────┤┃ +┃ ┃ ┃│ #2 │┃ ▶ ┃│ #2 │┃ +┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ + │ LOADING │ ┃│ LOADING │┃ + │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + └──────────────────┘ └──────────────────┘ + + load next page ▼ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ #0 │ │ #0 │ │ #0 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + │ #1 │ │ #1 │ ┃│ #1 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #2 │ │ #2 │ ┃│ #2 │┃ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ scroll ┃│ │┃ +┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ +┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ +┃│ │┃ load ┃│ │┃ ◀ ┃│ │┃ +┃├──────────────────┤┃ next ┃├──────────────────┤┃ ┃├──────────────────┤┃ +┃│ #4 │┃ page ┃│ #4 │┃ ┃│ #4 │┃ +┃│ │┃ ┃│ │┃ ┗┿━━━━━━━━━━━━━━━━━━┿┛ +┃├──────────────────┤┃ ◀ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #5 │┃ ┃│ #5 │┃ │ #5 │ +┃│ │┃ ┃│ │┃ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ LOADING │ + │ #6 │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ └──────────────────┘ └──────────────────┘ + │ #7 │ + │ │ + ├──────────────────┤ + │ #8 │ + │ │ + ├──────────────────┤ + │ LOADING │ + │ PLACEHOLDER │ + └──────────────────┘ +``` + +
+
+ +Let's implement the `InfiniteFeed` windowed component with infinite items loading. Here is a [live demo][todo] with [source code][todo]. + +
+ + Show a windowed infinite loading illustration. + + +
+ +Consider page size equals to 3 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. + +Compare it with the "infinite loading illustration" above to get more insights. + +``` +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ +┃│ LOADING │┃ ┃│ #0 │┃ │ start space = │ +┃│ PLACEHOLDER │┃ load ┃│ │┃ │ #0.size │ +┃└──────────────────┘┃ first ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┃ ┃ page ┃│ #1 │┃ scroll ┃│ #1 │┃ +┃ ┃ ┃│ │┃ down ┃│ │┃ +┃ ┃ ▶ ┃├──────────────────┤┃ ┃├──────────────────┤┃ +┃ ┃ ┃│ #2 │┃ ▶ ┃│ #2 │┃ +┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ + │ end space = │ ┃│ LOADING │┃ + │ placeholder.size │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + └──────────────────┘ └──────────────────┘ + + load next page ▼ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ start space = │ │ start space = │ │ start space = │ + │ #0.size + │ │ #0.size + │ │ #0.size │ + │ #1.size │ │ #1.size │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + │ │ │ │ ┃│ #1 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #2 │ │ #2 │ ┃│ #2 │┃ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ scroll ┃│ │┃ +┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ +┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ +┃│ │┃ load ┃│ │┃ ◀ ┃│ │┃ +┃├──────────────────┤┃ next ┃├──────────────────┤┃ ┃├──────────────────┤┃ +┃│ #4 │┃ page ┃│ #4 │┃ ┃│ #4 │┃ +┃│ │┃ ┃│ │┃ ┗┿━━━━━━━━━━━━━━━━━━┿┛ +┃├──────────────────┤┃ ◀ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #5 │┃ ┃│ #5 │┃ │ end space = │ +┃│ │┃ ┃│ │┃ │ #5.size + │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ │ placeholder.size │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ + │ #6 │ │ PLACEHOLDER │ │ │ + ├──────────────────┤ └──────────────────┘ └──────────────────┘ + │ end space = │ + │ #7.size + │ + │ #8.size + │ + │ placeholder.size │ + │ │ + │ │ + │ │ + │ │ + └──────────────────┘ +``` + +
+
```tsx -interface UserPost { +import { useWindowedList } from '@react-hook-window/use-windowed-list' +import { + LoadingItemsRange, + useItemsLoader +} from '@react-hook-window/use-items-loader' + +interface FeedItem { id: string - title: string content: string } -const FaceTubeFeed: React.VFC<{ +const FEED_ITEM_LOADING_PLACEHOLDER_COUNT = 1 + +export const InfiniteFeed: React.VFC<{ + feedItems: Array loadNextPage(): void -}> = () => {} +}> = ({ feedItems, loadNextPage }) => { + const { + setContainerRef, + startSpace, + endSpace, + indexes, + isScrolling, + overscanFromIndex, + overscanBeforeIndex + } = useWindowedList({ + containerSize: FEED_CONTAINER_HEIGHT, + itemSize: FEED_ITEM_HEIGHT, + // 1. Reserve extra items for the loading placeholders. + // It might be reasonable to define the value equal to a page size. + itemCount: feedItems.length + FEED_ITEM_LOADING_PLACEHOLDER_COUNT + }) + + useItemsLoader({ + // 2. Skip the loading while isScrolling + skip: isScrolling, + overscanFromIndex, + overscanBeforeIndex, + shouldLoadItem: React.useCallback( + (index: number) => { + // 3. Items further than feedItems are loading placeholders + // so they should be loaded. + return index >= feedItems.length + }, + [feedItems.length] + ), + loadItemsRange: React.useCallback( + (_range: LoadingItemsRange) => { + // 4. Just load the next page ignoring loading items range. + loadNextPage() + }, + [loadNextPage] + ) + }) + + return ( +
+
+ + {indexes.map(index => { + // 5. Render as many placeholders as reserved. + if (index >= feedItems.length) { + return ( +
+ LOADING PLACEHOLDER +
+ ) + } + + const feedItem = feedItems[index] + + return ( +
+ {feedItem.content} +
+ ) + })} + +
+
+ ) +} ``` + + + +[todo]: #i-am-sorry-it-is-not-done-yet +[use-windowed-list-options.overscan-count]: ../use-windowed-list/README.md#usewindowedlistoptionsoverscancount diff --git a/packages/use-items-loader/src/index.ts b/packages/use-items-loader/src/index.ts index 25348cd..75463b6 100644 --- a/packages/use-items-loader/src/index.ts +++ b/packages/use-items-loader/src/index.ts @@ -8,7 +8,7 @@ export interface LoadingItemsRange { } export interface UseItemsLoaderOptions { - isScrolling: boolean + skip?: boolean overscanFromIndex: number overscanBeforeIndex: number shouldLoadItem(index: number): boolean @@ -16,14 +16,14 @@ export interface UseItemsLoaderOptions { } export const useItemsLoader = ({ - isScrolling, + skip = false, overscanFromIndex, overscanBeforeIndex, shouldLoadItem, loadItemsRange }: UseItemsLoaderOptions): void => { useEffect(() => { - if (isScrolling) { + if (skip) { return } @@ -41,7 +41,7 @@ export const useItemsLoader = ({ }) } }, [ - isScrolling, + skip, overscanFromIndex, overscanBeforeIndex, shouldLoadItem, diff --git a/sandbox/src/InfiniteLoaderDemo.tsx b/sandbox/src/InfiniteLoaderDemo.tsx index 48d9f73..299eaf1 100644 --- a/sandbox/src/InfiniteLoaderDemo.tsx +++ b/sandbox/src/InfiniteLoaderDemo.tsx @@ -85,7 +85,7 @@ const InfiniteRangeLoaderDemo = React.memo(() => { }) useItemsLoader({ - isScrolling, + skip: isScrolling, overscanFromIndex, overscanBeforeIndex, shouldLoadItem, @@ -148,7 +148,7 @@ const InfinitePagedLoaderDemo = React.memo(() => { }) useItemsLoader({ - isScrolling, + skip: isScrolling, overscanFromIndex, overscanBeforeIndex, shouldLoadItem, @@ -197,7 +197,7 @@ const UndefinitePagedLoaderDemo = React.memo(() => { }) useItemsLoader({ - isScrolling, + skip: isScrolling, overscanFromIndex, overscanBeforeIndex, shouldLoadItem, From ee9d5cd57679e8f48545ef8bca0d3b3ac597f2c8 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Sat, 25 Sep 2021 15:32:24 +0700 Subject: [PATCH 04/18] docs: add delimiters to illustrations affects: @react-hook-window/use-items-loader, @react-hook-window/use-windowed-list --- packages/use-items-loader/README.md | 4 ++-- packages/use-windowed-list/README.md | 13 +++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 50c19ae..18708fb 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -44,7 +44,7 @@ Consider page size equal to 3 items. │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ └──────────────────┘ └──────────────────┘ - load next page ▼ +╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load next page ▼ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ #0 │ │ #0 │ │ #0 │ @@ -110,7 +110,7 @@ Compare it with the "infinite loading illustration" above to get more insights. │ placeholder.size │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ └──────────────────┘ └──────────────────┘ - load next page ▼ +╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load next page ▼ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ start space = │ │ start space = │ │ start space = │ diff --git a/packages/use-windowed-list/README.md b/packages/use-windowed-list/README.md index ab11279..cb2d3a3 100644 --- a/packages/use-windowed-list/README.md +++ b/packages/use-windowed-list/README.md @@ -549,7 +549,7 @@ A set of available values defining a target element when scrolling via [`UseW │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ - 3 ▼ no change + ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 3 ▼ no change ┏┯━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────┐ ┌─────────────────┐ ┃│ #0 │┃ │ #0 │ │ #0 │ @@ -623,7 +623,7 @@ A set of available values defining a target element when scrolling via [`UseW │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ - 3 ▼ no change + ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 3 ▼ no change ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ #0 │ │ #0 │ │ #0 │ @@ -733,7 +733,8 @@ A set of available values defining a target element when scrolling via [`UseW │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ - 12 ▼ no change + ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 12 ▼ no change + 3. scrolling to 12th that is already visible - no scroll needed 4. scrolling to 3th that is farther than one viewport - scroll to center the 3rd item 5. scrolling to 0th that is closer than one viewport - scroll as little as possible @@ -843,7 +844,7 @@ A set of available values defining a target element when scrolling via [`UseW │ │ │ │ ┃│ │┃ └─────────────────┘ └─────────────────┘ ┗┷━━━━━━━━━━━━━━━━━┷┛ - 3 ▼ + ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 3 ▼ ┏┯━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────┐ ┌─────────────────┐ ┃│ #0 │┃ │ #0 │ │ #0 │ @@ -926,7 +927,7 @@ A set of available values defining a target element when scrolling via [`UseW │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ - 6 ▼ + ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 6 ▼ ┏┯━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────┐ ┌─────────────────┐ ┃│ #0 │┃ │ #0 │ │ #0 │ @@ -1009,7 +1010,7 @@ A set of available values defining a target element when scrolling via [`UseW │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ - 7 ▼ + ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ 7 ▼ ┏┯━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────┐ ┌─────────────────┐ ┃│ #0 │┃ │ #0 │ │ #0 │ From c2326424c77eacc355d9158177e9946b8496048d Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Sat, 25 Sep 2021 15:56:52 +0700 Subject: [PATCH 05/18] docs: init "Finite loading usage" section affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 18708fb..0f8851e 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -178,7 +178,7 @@ export const InfiniteFeed: React.VFC<{ containerSize: FEED_CONTAINER_HEIGHT, itemSize: FEED_ITEM_HEIGHT, // 1. Reserve extra items for the loading placeholders. - // It might be reasonable to define the value equal to a page size. + // It might be reasonable to define the value equal to the loading page size. itemCount: feedItems.length + FEED_ITEM_LOADING_PLACEHOLDER_COUNT }) @@ -189,8 +189,7 @@ export const InfiniteFeed: React.VFC<{ overscanBeforeIndex, shouldLoadItem: React.useCallback( (index: number) => { - // 3. Items further than feedItems are loading placeholders - // so they should be loaded. + // 3. Items further than feedItems are loading placeholders so they should be loaded. return index >= feedItems.length }, [feedItems.length] @@ -248,6 +247,10 @@ export const InfiniteFeed: React.VFC<{ } ``` +## Finite loading (aka pagination) usage + +Consider TODO example. That case is a finite loading list, where an application knows a total count of items but loads them page by page when a user scrolls to an unloaded area. The app might render loading placeholders instead of all unloaded items since the total count is known ahead. + [todo]: #i-am-sorry-it-is-not-done-yet From 10a499b7e9503cedaf12e3a197b72e961552d9dd Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Wed, 29 Sep 2021 12:11:26 +0300 Subject: [PATCH 06/18] docs: add finite loading illustration affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 194 +++++++++++++++++++++++++--- 1 file changed, 175 insertions(+), 19 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 0f8851e..9fd339e 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -35,7 +35,7 @@ Consider page size equal to 3 items. ┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ ┃└──────────────────┘┃ first ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┃ ┃ page ┃│ #1 │┃ scroll ┃│ #1 │┃ -┃ ┃ ┃│ │┃ down ┃│ │┃ +┃ ┃ ┃│ │┃ down ┃│ │┃ ┃ ┃ ▶ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃ ┃ ┃│ #2 │┃ ▶ ┃│ #2 │┃ ┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ @@ -55,7 +55,7 @@ Consider page size equal to 3 items. ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ │ #2 │ │ #2 │ ┃│ #2 │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ scroll ┃│ │┃ -┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ +┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ │┃ load ┃│ │┃ ◀ ┃│ │┃ ┃├──────────────────┤┃ next ┃├──────────────────┤┃ ┃├──────────────────┤┃ @@ -66,7 +66,7 @@ Consider page size equal to 3 items. ┃│ │┃ ┃│ │┃ │ │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ LOADING │ - │ #6 │ │ PLACEHOLDER │ │ PLACEHOLDER │ + │ │ │ PLACEHOLDER │ │ PLACEHOLDER │ ├──────────────────┤ └──────────────────┘ └──────────────────┘ │ #7 │ │ │ @@ -101,7 +101,7 @@ Compare it with the "infinite loading illustration" above to get more insights. ┃│ PLACEHOLDER │┃ load ┃│ │┃ │ #0.size │ ┃└──────────────────┘┃ first ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┃ ┃ page ┃│ #1 │┃ scroll ┃│ #1 │┃ -┃ ┃ ┃│ │┃ down ┃│ │┃ +┃ ┃ ┃│ │┃ down ┃│ │┃ ┃ ┃ ▶ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃ ┃ ┃│ #2 │┃ ▶ ┃│ #2 │┃ ┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ @@ -121,7 +121,7 @@ Compare it with the "infinite loading illustration" above to get more insights. ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ │ #2 │ │ #2 │ ┃│ #2 │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ scroll ┃│ │┃ -┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ +┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ │┃ load ┃│ │┃ ◀ ┃│ │┃ ┃├──────────────────┤┃ next ┃├──────────────────┤┃ ┃├──────────────────┤┃ @@ -132,7 +132,7 @@ Compare it with the "infinite loading illustration" above to get more insights. ┃│ │┃ ┃│ │┃ │ #5.size + │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ placeholder.size │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ - │ #6 │ │ PLACEHOLDER │ │ │ + │ │ │ PLACEHOLDER │ │ │ ├──────────────────┤ └──────────────────┘ └──────────────────┘ │ end space = │ │ #7.size + │ @@ -160,12 +160,11 @@ interface FeedItem { content: string } -const FEED_ITEM_LOADING_PLACEHOLDER_COUNT = 1 - export const InfiniteFeed: React.VFC<{ + feedItemsPlaceholderCount?: number feedItems: Array loadNextPage(): void -}> = ({ feedItems, loadNextPage }) => { +}> = ({ feedItemsPlaceholderCount = 1, feedItems, loadNextPage }) => { const { setContainerRef, startSpace, @@ -179,7 +178,7 @@ export const InfiniteFeed: React.VFC<{ itemSize: FEED_ITEM_HEIGHT, // 1. Reserve extra items for the loading placeholders. // It might be reasonable to define the value equal to the loading page size. - itemCount: feedItems.length + FEED_ITEM_LOADING_PLACEHOLDER_COUNT + itemCount: feedItems.length + feedItemsPlaceholderCount }) useItemsLoader({ @@ -188,17 +187,13 @@ export const InfiniteFeed: React.VFC<{ overscanFromIndex, overscanBeforeIndex, shouldLoadItem: React.useCallback( - (index: number) => { - // 3. Items further than feedItems are loading placeholders so they should be loaded. - return index >= feedItems.length - }, + // 3. Items further than feedItems are loading placeholders so they should be loaded. + (index: number) => index >= feedItems.length, [feedItems.length] ), loadItemsRange: React.useCallback( - (_range: LoadingItemsRange) => { - // 4. Just load the next page ignoring loading items range. - loadNextPage() - }, + // 4. Just load the next page ignoring loading items range. + (_range: LoadingItemsRange) => loadNextPage(), [loadNextPage] ) }) @@ -249,7 +244,168 @@ export const InfiniteFeed: React.VFC<{ ## Finite loading (aka pagination) usage -Consider TODO example. That case is a finite loading list, where an application knows a total count of items but loads them page by page when a user scrolls to an unloaded area. The app might render loading placeholders instead of all unloaded items since the total count is known ahead. +Consider an Internet shop's searching page where resulting items split into pages. That case is a finite loading list, where an application knows a total count of items but loads them page by page when a user scrolls to an unloaded area. The app might render loading placeholders instead of all unloaded items since the total count is known ahead. + +
+ + Show a finite loading illustration. + + +
+ +Consider page size equal to 3 items with total count of 15 items. + +``` +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ +┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ +┃├──────────────────┤┃ first ┃├──────────────────┤┃ scroll ├──────────────────┤ +┃│ #1 LOADING │┃ page ┃│ #1 │┃ one │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ page ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ▶ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ + +╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load second page ▼ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ #0 │ │ #0 │ │ #0 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #1 │ │ #1 │ │ #1 │ + │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #2 │ │ #2 │ ┃│ #2 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #3 │ │ #3 │ ┃│ #3 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #4 │ │ #4 │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #5 │ │ #5 │ │ #5 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #6 │ │ #6 LOADING │ scroll │ #6 LOADING │ + │ │ load │ PLACEHOLDER │ two │ PLACEHOLDER │ + ├──────────────────┤ third ├──────────────────┤ pages ├──────────────────┤ + │ #7 │ page │ #7 LOADING │ down │ #7 LOADING │ + │ │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ◀ ├──────────────────┤ ◀ ├──────────────────┤ + │ #8 │ │ #8 LOADING │ │ #8 LOADING │ + │ │ │ PLACEHOLDER │ │ PLACEHOLDER │ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ +┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ │ #9 LOADING │ +┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ │ #10 LOADING │ +┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ │ #11 LOADING │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ + + load fourth page ▼ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ #0 │ │ #0 │ │ #0 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #1 │ │ #1 │ │ #1 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #2 │ │ #2 │ │ #2 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #3 │ │ #3 │ │ #3 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #4 │ │ #4 │ │ #4 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #5 │ │ #5 │ │ #5 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #6 │ │ #6 │ │ #6 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #7 │ │ #7 │ │ #7 │ + │ │ scroll │ │ │ │ + ├──────────────────┤ one ├──────────────────┤ load ├──────────────────┤ + │ #8 │ page │ #8 │ fifth │ #8 │ + │ │ down │ │ page │ │ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ +┃│ #9 │┃ ▶ │ #9 │ ▶ │ #9 │ +┃│ │┃ │ │ │ │ +┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ +┃│ #10 │┃ │ #10 │ │ #10 │ +┃│ │┃ │ │ │ │ +┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ + │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ + │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ +``` + +
+
+ +Let's implement the `SearchingResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo]. From 5e72a78872e68a20934b05d20ad27f3e9e217f47 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Wed, 29 Sep 2021 13:00:24 +0300 Subject: [PATCH 07/18] docs: add finite loading code example affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 256 +++++++++++++++++++++++++++- 1 file changed, 255 insertions(+), 1 deletion(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 9fd339e..3ecf839 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -405,7 +405,261 @@ Consider page size equal to 3 items with total count of 15 items. -Let's implement the `SearchingResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo]. +Let's implement the `SearchResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo]. + +
+ + Show a windowed finite loading illustration. + + +
+ +Consider page size equal to 3 items with total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. + +Compare it with the "finite loading illustration" above to get more insights. + +``` +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ +┃│ PLACEHOLDER │┃ load ┃│ │┃ │ #0.size │ +┃├──────────────────┤┃ first ┃├──────────────────┤┃ scroll ├──────────────────┤ +┃│ #1 LOADING │┃ page ┃│ #1 │┃ one │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ page ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ▶ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ + │ 12x │ │ 12x │ ┃│ PLACEHOLDER │┃ + │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ + │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ │ │ │ │ PLACEHOLDER │ + │ │ │ │ ├──────────────────┤ + │ │ │ │ │ end space = │ + │ │ │ │ │ 10x │ + │ │ │ │ │ placeholder.size │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ + +╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load second page ▼ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ start space = │ │ start space = │ │ start space = │ + │ #0.size + │ │ #0.size + │ │ #0.size │ + │ #1.size + │ │ #1.size + │ ├──────────────────┤ + │ #2.size + │ │ #2.size + │ │ #1 │ + │ #3.size + │ │ #3.size + │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + │ #4.size + │ │ #4.size + │ ┃├──────────────────┤┃ + │ #5.size + │ │ #5.size + │ ┃│ #2 │┃ + │ #6.size + │ │ 3x │ ┃│ │┃ + │ #7.size + │ │ placeholder.size │ ┃├──────────────────┤┃ + │ #8.size │ │ │ ┃│ #3 │┃ + │ │ │ │ ┃│ │┃ + │ │ │ │ ┃├──────────────────┤┃ + │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ │ │ │ │ │ + │ │ │ │ ├──────────────────┤ + │ │ │ │ │ end space = │ + │ │ │ │ │ #5.size + │ + │ │ │ │ │ 9x │ + │ │ │ │ scroll │ placeholder.size │ + │ │ load │ │ two │ │ + │ │ third │ │ pages │ │ + │ │ page │ │ down │ │ + │ │ │ │ │ │ + │ │ ◀ │ │ ◀ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ +┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ │ │ +┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ +┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ │ │ +┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ +┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ │ │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ + ├──────────────────┤ ├──────────────────┤ │ │ + │ end space = │ │ end space = │ │ │ + │ 3x │ │ 3x │ │ │ + │ placeholder.size │ │ placeholder.size │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ + + load fourth page ▼ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ start space = │ │ start space = │ │ start space = │ + │ #0.size + │ │ #0.size + │ │ #0.size + │ + │ #1.size + │ │ #1.size + │ │ #1.size + │ + │ #2.size + │ │ #2.size + │ │ #2.size + │ + │ #3.size + │ │ #3.size + │ │ #3.size + │ + │ #4.size + │ │ #4.size + │ │ #4.size + │ + │ #5.size + │ │ #5.size + │ │ #5.size + │ + │ #6.size + │ │ #6.size + │ │ #6.size + │ + │ #7.size + │ │ #7.size + │ │ #7.size + │ + │ #8.size │ │ #8.size + │ │ #8.size + │ + │ │ │ #9.size + │ │ #9.size + │ + │ │ │ #10.size │ │ #10.size │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ │ │ │ │ + │ │ scroll │ │ │ │ + │ │ one │ │ load │ │ + │ │ page │ │ fifth │ │ + │ │ down │ │ page │ │ +┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ +┃│ #9 │┃ ▶ │ │ ▶ │ │ +┃│ │┃ │ │ │ │ +┃├──────────────────┤┃ │ │ │ │ +┃│ #10 │┃ │ │ │ │ +┃│ │┃ │ │ │ │ +┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ + │ 3x │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ + │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ │ ├──────────────────┤ ├──────────────────┤ + │ │ │ end space = │ │ end space = │ + │ │ │ placeholder.size │ │ #14.size │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ +``` + +
+
+ +```tsx +import { useWindowedList } from '@react-hook-window/use-windowed-list' +import { + LoadingItemsRange, + useItemsLoader +} from '@react-hook-window/use-items-loader' + +interface SearchItem { + id: string + content: string +} + +export const SearchResult: React.VFC<{ + searchItemsTotalCount: number + searchItems: Array + loadNextPage(): void +}> = ({ searchItemsTotalCount, searchItems, loadNextPage }) => { + const { + setContainerRef, + startSpace, + endSpace, + indexes, + isScrolling, + overscanFromIndex, + overscanBeforeIndex + } = useWindowedList({ + containerSize: SEARCH_CONTAINER_HEIGHT, + itemSize: SEARCH_ITEM_HEIGHT, + // 1. Pass total count but not searchItems.length + itemCount: searchItemsTotalCount + }) + + useItemsLoader({ + // 2. Skip the loading while isScrolling + skip: isScrolling, + overscanFromIndex, + overscanBeforeIndex, + shouldLoadItem: React.useCallback( + // 3. Items further than searchItems are loading placeholders so they should be loaded. + (index: number) => index >= searchItems.length, + [searchItems.length] + ), + loadItemsRange: React.useCallback( + // 4. Just load the next page ignoring loading items range. + (_range: LoadingItemsRange) => loadNextPage(), + [loadNextPage] + ) + }) + + return ( +
+
+ + {indexes.map(index => { + // 5. Render as many placeholders as needed. + if (index >= searchItems.length) { + return ( +
+ LOADING PLACEHOLDER +
+ ) + } + + const searchItem = searchItems[index] + + return ( +
+ {searchItem.content} +
+ ) + })} + +
+
+ ) +} +``` From ac69f3491c30686bec5d0dca617f9a3077c38a36 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Wed, 29 Sep 2021 13:44:54 +0300 Subject: [PATCH 08/18] docs: add range loading illustration affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 219 +++++++++++++++++++++++++++- 1 file changed, 218 insertions(+), 1 deletion(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 3ecf839..45bdbef 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -18,7 +18,7 @@ npm install @react-hook-window/use-items-loader --save ## Infinite loading usage -Consider a social network feed like one in Instagram, Facebook, YouTube, etc. That case is an infinite loading list, where an application can always render a loading placeholder while the next page is loading. As soon as the loading placeholder becomes visible the app starts the next page loading. +Consider a social network feed like one on Instagram, Facebook, YouTube, etc. That case is an infinite loading list, where an application can always render a loading placeholder while the next page is loading. As soon as the loading placeholder becomes visible, the app starts the next page loading.
@@ -661,6 +661,223 @@ export const SearchResult: React.VFC<{ } ``` +## Range loading usage + +The finite loading use case above might be a bit underwhelming for some use cases. + +1. The app might not need to load an entire page but only a few items. +2. The app might need to load a far away page. + +For both cases, it might be helpful to load a range of items instead of a page. That case is a range loading list, where an application knows a total count of items and can fetch a range of them when a user scrolls to unloaded items. The app might render loading placeholders since the total count is known ahead. + +
+ + Show a range loading illustration. + + +
+ +Consider total count of 15 items. + +``` +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ +┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ +┃├──────────────────┤┃ items ┃├──────────────────┤┃ scroll ├──────────────────┤ +┃│ #1 LOADING │┃ 0,1,2 ┃│ #1 │┃ down │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ + +╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load item 3 ▼ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ #0 │ │ #0 │ │ #0 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #1 │ │ #1 │ │ #1 │ + │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #2 │ │ #2 │ ┃│ #2 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #3 │ │ #3 │ ┃│ #3 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ + │ PLACEHOLDER │ load │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ items ├──────────────────┤ scroll ├──────────────────┤ + │ #7 LOADING │ 9,10,11 │ #7 LOADING │ down │ #7 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ◀ ├──────────────────┤ ◀ ├──────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ +┃│ #9 │┃ ┃│ #9 LOADING │┃ │ #9 LOADING │ +┃│ │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #10 │┃ ┃│ #10 LOADING │┃ │ #10 LOADING │ +┃│ │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #11 │┃ ┃│ #11 LOADING │┃ │ #11 LOADING │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ + + scroll down ▼ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ #0 │ │ #0 │ │ #0 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #1 │ │ #1 │ │ #1 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #2 │ │ #2 │ │ #2 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #3 │ │ #3 │ │ #3 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + ├──────────────────┤ load ├──────────────────┤ scroll ├──────────────────┤ + │ #8 LOADING │ items │ #8 LOADING │ up │ #8 LOADING │ + │ PLACEHOLDER │ 12,13 │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #9 │ ▶ │ #9 │ ▶ │ #9 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #10 │ │ #10 │ │ #10 │ + │ │ │ │ │ │ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ +┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ +┃│ │┃ ┃│ │┃ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ + +╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load items 5,6,7 ▼ + + ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ + │ #0 │ │ #0 │ │ #0 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #1 │ │ #1 │ │ #1 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #2 │ │ #2 │ │ #2 │ +┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #3 │┃ ┃│ #3 │┃ │ #3 │ +┃│ │┃ ┃│ │┃ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ +┃│ #4 │┃ ┃│ #4 LOADING │┃ │ #4 LOADING │ +┃│ │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ #5 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #6 │ │ #6 │ ┃│ #6 │┃ + │ │ │ │ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ + │ #7 │ │ #7 │ ┃│ #7 │┃ + │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + ├──────────────────┤ load ├──────────────────┤ scroll ├──────────────────┤ + │ #8 LOADING │ item │ #8 LOADING │ up │ #8 LOADING │ + │ PLACEHOLDER │ 4 │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #9 │ ◀ │ #9 │ ◀ │ #9 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #10 │ │ #10 │ │ #10 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #11 │ │ #11 │ │ #11 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #12 │ │ #12 │ │ #12 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #13 │ │ #13 │ │ #13 │ + │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ +``` + +
+
+ [todo]: #i-am-sorry-it-is-not-done-yet From 6c3ab49e7a5313423ff1d4d2d45e43967c601a63 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Wed, 29 Sep 2021 14:33:13 +0300 Subject: [PATCH 09/18] docs: try place illustration in a single line affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 240 ++++++---------------------- 1 file changed, 47 insertions(+), 193 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 45bdbef..83377db 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -680,199 +680,53 @@ For both cases, it might be helpful to load a range of items instead of a page. Consider total count of 15 items. ``` -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ -┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ -┃├──────────────────┤┃ items ┃├──────────────────┤┃ scroll ├──────────────────┤ -┃│ #1 LOADING │┃ 0,1,2 ┃│ #1 │┃ down │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ - -╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load item 3 ▼ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ #0 │ │ #0 │ │ #0 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #1 │ │ #1 │ │ #1 │ - │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #2 │ │ #2 │ ┃│ #2 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #3 │ │ #3 │ ┃│ #3 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ - │ PLACEHOLDER │ load │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ items ├──────────────────┤ scroll ├──────────────────┤ - │ #7 LOADING │ 9,10,11 │ #7 LOADING │ down │ #7 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ◀ ├──────────────────┤ ◀ ├──────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ -┃│ #9 │┃ ┃│ #9 LOADING │┃ │ #9 LOADING │ -┃│ │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #10 │┃ ┃│ #10 LOADING │┃ │ #10 LOADING │ -┃│ │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #11 │┃ ┃│ #11 LOADING │┃ │ #11 LOADING │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ - - scroll down ▼ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ #0 │ │ #0 │ │ #0 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #1 │ │ #1 │ │ #1 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #2 │ │ #2 │ │ #2 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #3 │ │ #3 │ │ #3 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - ├──────────────────┤ load ├──────────────────┤ scroll ├──────────────────┤ - │ #8 LOADING │ items │ #8 LOADING │ up │ #8 LOADING │ - │ PLACEHOLDER │ 12,13 │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #9 │ ▶ │ #9 │ ▶ │ #9 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #10 │ │ #10 │ │ #10 │ - │ │ │ │ │ │ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ -┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ -┃│ │┃ ┃│ │┃ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ - -╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load items 5,6,7 ▼ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ #0 │ │ #0 │ │ #0 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #1 │ │ #1 │ │ #1 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #2 │ │ #2 │ │ #2 │ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #3 │┃ ┃│ #3 │┃ │ #3 │ -┃│ │┃ ┃│ │┃ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #4 │┃ ┃│ #4 LOADING │┃ │ #4 LOADING │ -┃│ │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ #5 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #6 │ │ #6 │ ┃│ #6 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #7 │ │ #7 │ ┃│ #7 │┃ - │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - ├──────────────────┤ load ├──────────────────┤ scroll ├──────────────────┤ - │ #8 LOADING │ item │ #8 LOADING │ up │ #8 LOADING │ - │ PLACEHOLDER │ 4 │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #9 │ ◀ │ #9 │ ◀ │ #9 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #10 │ │ #10 │ │ #10 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #11 │ │ #11 │ │ #11 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #12 │ │ #12 │ │ #12 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #13 │ │ #13 │ │ #13 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ + load items 0, 1, 2 ▶ scroll down ▶ load item 3 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll up ▶ load item 4 +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ ┃│ #3 │┃ ┃│ #3 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ ┃│ #4 LOADING │┃ ┃│ #4 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ #6 │ │ #6 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ + │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ │ #7 │ │ #7 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ │ #9 │ │ #9 │ │ #9 │ │ #9 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ │ #11 │ │ #11 │ │ #11 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ │ #12 │ │ #12 │ │ #12 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ │ #13 │ │ #13 │ │ #13 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ ``` From d46667c8a09054025ed101dc0be550ce9f61b6a5 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Thu, 30 Sep 2021 14:28:36 +0300 Subject: [PATCH 10/18] docs: rearrange windowed finite loading illustration affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 294 ++++++++++------------------ 1 file changed, 103 insertions(+), 191 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 83377db..6d8b5ba 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -253,9 +253,14 @@ Consider an Internet shop's searching page where resulting items split into page
+
+ Consider page size equal to 3 items with total count of 15 items. ``` +TODO continue from here +load first page ▶ scroll one page down ▶ load second page ▶ scroll two pages down ▶ load third page ▶ scroll fourth pages down ▶ scroll one page down ▶ load fifth page + ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ ┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ @@ -414,155 +419,60 @@ Let's implement the `SearchResult` windowed component with finite items loading.
+
+ Consider page size equal to 3 items with total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. Compare it with the "finite loading illustration" above to get more insights. ``` -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ -┃│ PLACEHOLDER │┃ load ┃│ │┃ │ #0.size │ -┃├──────────────────┤┃ first ┃├──────────────────┤┃ scroll ├──────────────────┤ -┃│ #1 LOADING │┃ page ┃│ #1 │┃ one │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ page ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ▶ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ - │ 12x │ │ 12x │ ┃│ PLACEHOLDER │┃ - │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ - │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ │ │ │ │ PLACEHOLDER │ - │ │ │ │ ├──────────────────┤ - │ │ │ │ │ end space = │ - │ │ │ │ │ 10x │ - │ │ │ │ │ placeholder.size │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ - -╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load second page ▼ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ start space = │ │ start space = │ │ start space = │ - │ #0.size + │ │ #0.size + │ │ #0.size │ - │ #1.size + │ │ #1.size + │ ├──────────────────┤ - │ #2.size + │ │ #2.size + │ │ #1 │ - │ #3.size + │ │ #3.size + │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - │ #4.size + │ │ #4.size + │ ┃├──────────────────┤┃ - │ #5.size + │ │ #5.size + │ ┃│ #2 │┃ - │ #6.size + │ │ 3x │ ┃│ │┃ - │ #7.size + │ │ placeholder.size │ ┃├──────────────────┤┃ - │ #8.size │ │ │ ┃│ #3 │┃ - │ │ │ │ ┃│ │┃ - │ │ │ │ ┃├──────────────────┤┃ - │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ │ │ │ │ │ - │ │ │ │ ├──────────────────┤ - │ │ │ │ │ end space = │ - │ │ │ │ │ #5.size + │ - │ │ │ │ │ 9x │ - │ │ │ │ scroll │ placeholder.size │ - │ │ load │ │ two │ │ - │ │ third │ │ pages │ │ - │ │ page │ │ down │ │ - │ │ │ │ │ │ - │ │ ◀ │ │ ◀ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ -┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ │ │ -┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ -┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ │ │ -┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ -┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ │ │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ - ├──────────────────┤ ├──────────────────┤ │ │ - │ end space = │ │ end space = │ │ │ - │ 3x │ │ 3x │ │ │ - │ placeholder.size │ │ placeholder.size │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ - - load fourth page ▼ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ start space = │ │ start space = │ │ start space = │ - │ #0.size + │ │ #0.size + │ │ #0.size + │ - │ #1.size + │ │ #1.size + │ │ #1.size + │ - │ #2.size + │ │ #2.size + │ │ #2.size + │ - │ #3.size + │ │ #3.size + │ │ #3.size + │ - │ #4.size + │ │ #4.size + │ │ #4.size + │ - │ #5.size + │ │ #5.size + │ │ #5.size + │ - │ #6.size + │ │ #6.size + │ │ #6.size + │ - │ #7.size + │ │ #7.size + │ │ #7.size + │ - │ #8.size │ │ #8.size + │ │ #8.size + │ - │ │ │ #9.size + │ │ #9.size + │ - │ │ │ #10.size │ │ #10.size │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ │ │ │ │ - │ │ scroll │ │ │ │ - │ │ one │ │ load │ │ - │ │ page │ │ fifth │ │ - │ │ down │ │ page │ │ -┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ -┃│ #9 │┃ ▶ │ │ ▶ │ │ -┃│ │┃ │ │ │ │ -┃├──────────────────┤┃ │ │ │ │ -┃│ #10 │┃ │ │ │ │ -┃│ │┃ │ │ │ │ -┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ - │ 3x │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ - │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ │ ├──────────────────┤ ├──────────────────┤ - │ │ │ end space = │ │ end space = │ - │ │ │ placeholder.size │ │ #14.size │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ + load first page ▶ scroll one page down ▶ load second page ▶ scroll two pages down ▶ load third page ▶ load fourth page ▶ scroll one page down ▶ load fifth page +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ 3x │ │ #6.size + │ │ #6.size + │ │ #6.size + │ │ #6.size + │ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ placeholder.size │ │ #7.size + │ │ #7.size + │ │ #7.size + │ │ #7.size + │ + │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ │ │ #8.size │ │ #8.size │ │ #8.size + │ │ #8.size + │ + │ 12x │ │ 12x │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ + │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ │ │ │ │ │ #10.size │ │ #10.size │ + │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ ├──────────────────┤ ├──────────────────┤ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ 10x │ │ #5.size + │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ placeholder.size │ │ 9x │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ placeholder.size │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + │ │ │ │ │ │ │ │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ + │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + │ │ │ │ │ │ │ │ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ + │ │ │ │ │ │ │ │ │ 3x │ │ 3x │ │ 3x │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + │ │ │ │ │ │ │ │ │ placeholder.size │ │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├──────────────────┤ ├──────────────────┤ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ placeholder.size │ │ #14.size │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ ```
@@ -677,56 +587,58 @@ For both cases, it might be helpful to load a range of items instead of a page.
+
+ Consider total count of 15 items. ``` - load items 0, 1, 2 ▶ scroll down ▶ load item 3 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll up ▶ load item 4 -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ ┃│ #3 │┃ ┃│ #3 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ │ #4 LOADING │ ┃│ #4 LOADING │┃ ┃│ #4 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ #6 │ │ #6 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ - │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ │ #7 │ │ #7 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ │ #9 │ │ #9 │ │ #9 │ │ #9 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ │ #11 │ │ #11 │ │ #11 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ │ #12 │ │ #12 │ │ #12 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ │ #13 │ │ #13 │ │ #13 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ + load items 0, 1, 2 ▶ scroll down ▶ load items 3, 4 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll down ▶ load item 8 ▶ scroll down ▶ load item 14 +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ │ #5 │ │ #5 │ │ #5 │ │ #5 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ #6 │ │ #6 │ │ #6 │ │ #6 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ + │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ ┃│ #7 │┃ ┃│ #7 │┃ │ #7 │ │ #7 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ ┃│ #8 LOADING │┃ ┃│ #8 │┃ │ #8 │ │ #8 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ + │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ │ #9 │ │ #9 │ ┃│ #9 │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ │ #12 │ │ #12 │ │ #12 │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ │ #13 │ │ #13 │ │ #13 │ ┃│ #13 │┃ ┃│ #13 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ ┃│ #14 LOADING │┃ ┃│ #14 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ ┗┷━━━━━━━━━━━━━━━━━━┷┛ ┗┷━━━━━━━━━━━━━━━━━━┷┛ ```
From 3478c9d141eff65f541f1708f8b57923309b06f0 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Sat, 2 Oct 2021 10:26:24 +0200 Subject: [PATCH 11/18] WIP: update some illustrations affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 200 +++++++--------------------- 1 file changed, 47 insertions(+), 153 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 6d8b5ba..15d85af 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -253,158 +253,56 @@ Consider an Internet shop's searching page where resulting items split into page
-
- Consider page size equal to 3 items with total count of 15 items. ``` -TODO continue from here -load first page ▶ scroll one page down ▶ load second page ▶ scroll two pages down ▶ load third page ▶ scroll fourth pages down ▶ scroll one page down ▶ load fifth page - -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ -┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ -┃├──────────────────┤┃ first ┃├──────────────────┤┃ scroll ├──────────────────┤ -┃│ #1 LOADING │┃ page ┃│ #1 │┃ one │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ page ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┃├──────────────────┤┃ ▶ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ▶ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ - -╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load second page ▼ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ #0 │ │ #0 │ │ #0 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #1 │ │ #1 │ │ #1 │ - │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #2 │ │ #2 │ ┃│ #2 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #3 │ │ #3 │ ┃│ #3 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #4 │ │ #4 │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #5 │ │ #5 │ │ #5 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #6 │ │ #6 LOADING │ scroll │ #6 LOADING │ - │ │ load │ PLACEHOLDER │ two │ PLACEHOLDER │ - ├──────────────────┤ third ├──────────────────┤ pages ├──────────────────┤ - │ #7 │ page │ #7 LOADING │ down │ #7 LOADING │ - │ │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ◀ ├──────────────────┤ ◀ ├──────────────────┤ - │ #8 │ │ #8 LOADING │ │ #8 LOADING │ - │ │ │ PLACEHOLDER │ │ PLACEHOLDER │ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ -┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ │ #9 LOADING │ -┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ │ #10 LOADING │ -┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ │ PLACEHOLDER │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ │ #11 LOADING │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ - - load fourth page ▼ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ #0 │ │ #0 │ │ #0 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #1 │ │ #1 │ │ #1 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #2 │ │ #2 │ │ #2 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #3 │ │ #3 │ │ #3 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #4 │ │ #4 │ │ #4 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #5 │ │ #5 │ │ #5 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #6 │ │ #6 │ │ #6 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #7 │ │ #7 │ │ #7 │ - │ │ scroll │ │ │ │ - ├──────────────────┤ one ├──────────────────┤ load ├──────────────────┤ - │ #8 │ page │ #8 │ fifth │ #8 │ - │ │ down │ │ page │ │ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ -┃│ #9 │┃ ▶ │ #9 │ ▶ │ #9 │ -┃│ │┃ │ │ │ │ -┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ -┃│ #10 │┃ │ #10 │ │ #10 │ -┃│ │┃ │ │ │ │ -┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ - │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ - │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ + load first page ▶ scroll one page down ▶ load second page ▶ scroll two pages down ▶ load third page ▶ scroll fourth pages down ▶ scroll one page down ▶ load fifth page +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ +┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 │ │ #6 │ │ #6 │ │ #6 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 │ │ #7 │ │ #7 │ │ #7 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 │ │ #8 │ │ #8 │ │ #8 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ + │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ + │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ + └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ ```
@@ -419,8 +317,6 @@ Let's implement the `SearchResult` windowed component with finite items loading.
-
- Consider page size equal to 3 items with total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. Compare it with the "finite loading illustration" above to get more insights. @@ -587,8 +483,6 @@ For both cases, it might be helpful to load a range of items instead of a page.
-
- Consider total count of 15 items. ``` From 55947e5f7c577d6628ae7cb517a0343f545dacf6 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Mon, 4 Oct 2021 19:16:16 +0200 Subject: [PATCH 12/18] docs: flatten all use-items-loader illustrations affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 158 +++++++++++----------------- 1 file changed, 64 insertions(+), 94 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 15d85af..1af7072 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -30,53 +30,38 @@ Consider a social network feed like one on Instagram, Facebook, YouTube, etc. Th Consider page size equal to 3 items. ``` -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ -┃│ LOADING │┃ ┃│ #0 │┃ │ #0 │ -┃│ PLACEHOLDER │┃ load ┃│ │┃ │ │ -┃└──────────────────┘┃ first ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┃ ┃ page ┃│ #1 │┃ scroll ┃│ #1 │┃ -┃ ┃ ┃│ │┃ down ┃│ │┃ -┃ ┃ ▶ ┃├──────────────────┤┃ ┃├──────────────────┤┃ -┃ ┃ ┃│ #2 │┃ ▶ ┃│ #2 │┃ -┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ - │ LOADING │ ┃│ LOADING │┃ - │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - └──────────────────┘ └──────────────────┘ - -╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load next page ▼ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ #0 │ │ #0 │ │ #0 │ - │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - │ #1 │ │ #1 │ ┃│ #1 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #2 │ │ #2 │ ┃│ #2 │┃ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ scroll ┃│ │┃ -┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ -┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ -┃│ │┃ load ┃│ │┃ ◀ ┃│ │┃ -┃├──────────────────┤┃ next ┃├──────────────────┤┃ ┃├──────────────────┤┃ -┃│ #4 │┃ page ┃│ #4 │┃ ┃│ #4 │┃ -┃│ │┃ ┃│ │┃ ┗┿━━━━━━━━━━━━━━━━━━┿┛ -┃├──────────────────┤┃ ◀ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #5 │┃ ┃│ #5 │┃ │ #5 │ -┃│ │┃ ┃│ │┃ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ LOADING │ - │ │ │ PLACEHOLDER │ │ PLACEHOLDER │ - ├──────────────────┤ └──────────────────┘ └──────────────────┘ - │ #7 │ - │ │ - ├──────────────────┤ - │ #8 │ - │ │ - ├──────────────────┤ - │ LOADING │ - │ PLACEHOLDER │ - └──────────────────┘ + load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ +┃│ LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ +┃└──────────────────┘┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ +┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ +┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ +┃ ┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ +┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ +┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ LOADING │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ + │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ + └──────────────────┘ └──────────────────┘ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ + ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ #5 │ ┃│ #5 │┃ ┃│ #5 │┃ + │ │ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ + └──────────────────┘ └──────────────────┘ ├──────────────────┤ + │ #7 │ + │ │ + ├──────────────────┤ + │ #8 │ + │ │ + ├──────────────────┤ + │ LOADING │ + │ PLACEHOLDER │ + └──────────────────┘ ```
@@ -96,53 +81,38 @@ Consider page size equals to 3 items and [`UseWindowedListOptions.overscanCount` Compare it with the "infinite loading illustration" above to get more insights. ``` -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ -┃│ LOADING │┃ ┃│ #0 │┃ │ start space = │ -┃│ PLACEHOLDER │┃ load ┃│ │┃ │ #0.size │ -┃└──────────────────┘┃ first ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ -┃ ┃ page ┃│ #1 │┃ scroll ┃│ #1 │┃ -┃ ┃ ┃│ │┃ down ┃│ │┃ -┃ ┃ ▶ ┃├──────────────────┤┃ ┃├──────────────────┤┃ -┃ ┃ ┃│ #2 │┃ ▶ ┃│ #2 │┃ -┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ - │ end space = │ ┃│ LOADING │┃ - │ placeholder.size │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - └──────────────────┘ └──────────────────┘ - -╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ load next page ▼ - - ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ - │ start space = │ │ start space = │ │ start space = │ - │ #0.size + │ │ #0.size + │ │ #0.size │ - │ #1.size │ │ #1.size │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - │ │ │ │ ┃│ #1 │┃ - │ │ │ │ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ - │ #2 │ │ #2 │ ┃│ #2 │┃ -┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ scroll ┃│ │┃ -┃├──────────────────┤┃ ┃├──────────────────┤┃ down ┃├──────────────────┤┃ -┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ -┃│ │┃ load ┃│ │┃ ◀ ┃│ │┃ -┃├──────────────────┤┃ next ┃├──────────────────┤┃ ┃├──────────────────┤┃ -┃│ #4 │┃ page ┃│ #4 │┃ ┃│ #4 │┃ -┃│ │┃ ┃│ │┃ ┗┿━━━━━━━━━━━━━━━━━━┿┛ -┃├──────────────────┤┃ ◀ ┃├──────────────────┤┃ ├──────────────────┤ -┃│ #5 │┃ ┃│ #5 │┃ │ end space = │ -┃│ │┃ ┃│ │┃ │ #5.size + │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ │ placeholder.size │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ - │ │ │ PLACEHOLDER │ │ │ - ├──────────────────┤ └──────────────────┘ └──────────────────┘ - │ end space = │ - │ #7.size + │ - │ #8.size + │ - │ placeholder.size │ - │ │ - │ │ - │ │ - │ │ - └──────────────────┘ + load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page +┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ +┃│ LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ +┃└──────────────────┘┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ #1.size │ │ #1.size │ +┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ │ │ │ +┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ +┃ ┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ +┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ +┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ end space = │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ + │ placeholder.size │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ + └──────────────────┘ └──────────────────┘ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ + ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ end space = │ ┃│ #5 │┃ ┃│ #5 │┃ + │ #5.size + │ ┃│ │┃ ┃│ │┃ + │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ + │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ + │ │ │ PLACEHOLDER │ │ │ + └──────────────────┘ └──────────────────┘ ├──────────────────┤ + │ end space = │ + │ #7.size + │ + │ #8.size + │ + │ placeholder.size │ + │ │ + │ │ + │ │ + │ │ + └──────────────────┘ ```
From 37d43811421b38e3c7b9a67a57c143b38ac4b422 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Mon, 4 Oct 2021 19:51:37 +0200 Subject: [PATCH 13/18] docs: complete range windowed illustration affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 82 ++++++++++++++++++++++++++--- 1 file changed, 74 insertions(+), 8 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 1af7072..b87c80a 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -27,7 +27,7 @@ Consider a social network feed like one on Instagram, Facebook, YouTube, etc. Th
-Consider page size equal to 3 items. +Consider page size equals to 3 items. ``` load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page @@ -223,7 +223,7 @@ Consider an Internet shop's searching page where resulting items split into page
-Consider page size equal to 3 items with total count of 15 items. +Consider page size equals to 3 items with total count of 15 items. ``` load first page ▶ scroll one page down ▶ load second page ▶ scroll two pages down ▶ load third page ▶ scroll fourth pages down ▶ scroll one page down ▶ load fifth page @@ -287,7 +287,7 @@ Let's implement the `SearchResult` windowed component with finite items loading.
-Consider page size equal to 3 items with total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. +Consider page size equals to 3 items with total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. Compare it with the "finite loading illustration" above to get more insights. @@ -301,17 +301,17 @@ Compare it with the "finite loading illustration" above to get more insights. ┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ ┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ 3x │ │ #6.size + │ │ #6.size + │ │ #6.size + │ │ #6.size + │ +┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ 3* │ │ #6.size + │ │ #6.size + │ │ #6.size + │ │ #6.size + │ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ placeholder.size │ │ #7.size + │ │ #7.size + │ │ #7.size + │ │ #7.size + │ │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ │ │ #8.size │ │ #8.size │ │ #8.size + │ │ #8.size + │ - │ 12x │ │ 12x │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ + │ 12* │ │ 12* │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ │ │ │ │ │ #10.size │ │ #10.size │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├──────────────────┤ ├──────────────────┤ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ 10x │ │ #5.size + │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ placeholder.size │ │ 9x │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ 10* │ │ #5.size + │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ placeholder.size │ │ 9* │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ placeholder.size │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ @@ -331,7 +331,7 @@ Compare it with the "finite loading illustration" above to get more insights. │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ - │ │ │ │ │ │ │ │ │ 3x │ │ 3x │ │ 3x │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + │ │ │ │ │ │ │ │ │ 3* │ │ 3* │ │ 3* │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ placeholder.size │ │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ @@ -508,6 +508,72 @@ Consider total count of 15 items.
+Let's implement the `RangedSearchResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo]. + +
+ + Show a windowed range loading illustration. + + +
+ +Consider total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. + +Compare it with the "range loading illustration" above to get more insights. + +``` + load items 0, 1, 2 ▶ scroll down ▶ load items 3, 4 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll down ▶ load item 8 ▶ scroll down ▶ load item 14 +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size │ │ #4.size │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ 4 * loading.size │ │ 4 * loading.size │ │ 4 * loading.size + │ │ 4 * loading.size + │ │ │ │ │ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ #9.size + │ │ #9.size + │ │ │ │ │ │ #6.size │ │ #6.size │ │ #6.size + │ │ #6.size + │ + ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ #10.size │ │ #10.size │ │ │ │ │ │ │ │ │ │ #7.size + │ │ #7.size + │ + │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #8.size + │ │ #8.size + │ + │ 12 * loading.size │ │ 12 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ + │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #10.size + │ │ #10.size + │ + │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #11.size │ │ #11.size │ + │ │ │ │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ + │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ │ │ │ │ │ │ │ │ + │ │ │ │ │ 10 * loading.size │ │ 10 * loading.size │ │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ ┃│ #7 │┃ ┃│ #7 │┃ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ ┃│ #8 LOADING │┃ ┃│ #8 │┃ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ loading.size + │ │ loading.size + │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ #8.size + │ │ #8.size + │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ │ │ │ │ #9.size + │ │ #9.size + │ ┃│ #9 │┃ ┃│ #9 │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ #10.size + │ │ #10.size + │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ + │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ #11.size + │ │ #11.size + │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ │ │ │ │ #12.size + │ │ #12.size + │ │ end space = │ │ end space = │ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ #13.size + │ │ #13.size + │ │ #10.size + │ │ #10.size + │ │ │ │ │ + │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ loading.size │ │ loading.size │ │ #11.size + │ │ #11.size + │ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ │ │ │ │ #12.size + │ │ #12.size + │ │ │ │ │ + │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ #13.size + │ │ #13.size + │ │ │ │ │ + │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ loading.size │ │ loading.size │ ├─────────────────────┤ ├─────────────────────┤ + │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │ │ │ │ │ │ │ │ │ 3 * loading.size │ │ 3 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ + │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ │ │ │ │ │ │ │ ┃│ #13 │┃ ┃│ #13 │┃ + │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ + │ │ │ │ │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ ┃│ #14 LOADING │┃ ┃│ #14 │┃ + │ │ │ │ │ │ │ │ │ │ │ │ │ loading.size │ │ loading.size │ │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ +``` + +
+
+ [todo]: #i-am-sorry-it-is-not-done-yet From 8c04eea567519793e1493c9ec2706f46964339ea Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Tue, 5 Oct 2021 20:58:28 +0200 Subject: [PATCH 14/18] docs: format use-items-loader illustrations affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 410 ++++++++++++++-------------- 1 file changed, 205 insertions(+), 205 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index b87c80a..1e9c7d2 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -30,38 +30,38 @@ Consider a social network feed like one on Instagram, Facebook, YouTube, etc. Th Consider page size equals to 3 items. ``` - load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ -┃│ LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ -┃└──────────────────┘┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ -┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ -┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ -┃ ┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ -┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ -┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ LOADING │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ - │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ - └──────────────────┘ └──────────────────┘ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ - ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #5 │ ┃│ #5 │┃ ┃│ #5 │┃ - │ │ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ - └──────────────────┘ └──────────────────┘ ├──────────────────┤ - │ #7 │ - │ │ - ├──────────────────┤ - │ #8 │ - │ │ - ├──────────────────┤ - │ LOADING │ - │ PLACEHOLDER │ - └──────────────────┘ + load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ +┃│ LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ +┃└─────────────────────┘┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ +┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ +┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ +┃ ┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ +┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ +┗━━━━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ LOADING │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ + │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ + └─────────────────────┘ └─────────────────────┘ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ + ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ #5 │ ┃│ #5 │┃ ┃│ #5 │┃ + │ │ ┃│ │┃ ┃│ │┃ + ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ LOADING │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ + └─────────────────────┘ └─────────────────────┘ ├─────────────────────┤ + │ #7 │ + │ │ + ├─────────────────────┤ + │ #8 │ + │ │ + ├─────────────────────┤ + │ LOADING │ + │ PLACEHOLDER │ + └─────────────────────┘ ``` @@ -81,38 +81,38 @@ Consider page size equals to 3 items and [`UseWindowedListOptions.overscanCount` Compare it with the "infinite loading illustration" above to get more insights. ``` - load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ -┃│ LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ -┃└──────────────────┘┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ #1.size │ │ #1.size │ -┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ │ │ │ -┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ -┃ ┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ -┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ -┗━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ end space = │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ - │ placeholder.size │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ - └──────────────────┘ └──────────────────┘ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ - ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ end space = │ ┃│ #5 │┃ ┃│ #5 │┃ - │ #5.size + │ ┃│ │┃ ┃│ │┃ - │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ │ │ PLACEHOLDER │ │ │ - └──────────────────┘ └──────────────────┘ ├──────────────────┤ - │ end space = │ - │ #7.size + │ - │ #8.size + │ - │ placeholder.size │ - │ │ - │ │ - │ │ - │ │ - └──────────────────┘ + load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ +┃│ LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ +┃└─────────────────────┘┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ #1.size │ │ #1.size │ +┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ │ │ │ +┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ +┃ ┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ +┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ +┗━━━━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ end space = │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ + │ loading.size │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ + └─────────────────────┘ └─────────────────────┘ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ + ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ end space = │ ┃│ #5 │┃ ┃│ #5 │┃ + │ #5.size + │ ┃│ │┃ ┃│ │┃ + │ loading.size │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ + │ │ │ PLACEHOLDER │ │ │ + └─────────────────────┘ └─────────────────────┘ ├─────────────────────┤ + │ end space = │ + │ #7.size + │ + │ #8.size + │ + │ loading.size │ + │ │ + │ │ + │ │ + │ │ + └─────────────────────┘ ``` @@ -226,53 +226,53 @@ Consider an Internet shop's searching page where resulting items split into page Consider page size equals to 3 items with total count of 15 items. ``` - load first page ▶ scroll one page down ▶ load second page ▶ scroll two pages down ▶ load third page ▶ scroll fourth pages down ▶ scroll one page down ▶ load fifth page -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 │ │ #6 │ │ #6 │ │ #6 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 │ │ #7 │ │ #7 │ │ #7 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 │ │ #8 │ │ #8 │ │ #8 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ - │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ - │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ + load first page ▶ scroll down ▶ load second page ▶ scroll down far ▶ load third page ▶ load fourth page ▶ scroll down ▶ load fifth page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 │ │ #6 │ │ #6 │ │ #6 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 │ │ #7 │ │ #7 │ │ #7 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 │ │ #8 │ │ #8 │ │ #8 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ + │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ + │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ + └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ ``` @@ -292,53 +292,53 @@ Consider page size equals to 3 items with total count of 15 items and [`UseWindo Compare it with the "finite loading illustration" above to get more insights. ``` - load first page ▶ scroll one page down ▶ load second page ▶ scroll two pages down ▶ load third page ▶ load fourth page ▶ scroll one page down ▶ load fifth page -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ 3* │ │ #6.size + │ │ #6.size + │ │ #6.size + │ │ #6.size + │ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ placeholder.size │ │ #7.size + │ │ #7.size + │ │ #7.size + │ │ #7.size + │ - │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ │ │ #8.size │ │ #8.size │ │ #8.size + │ │ #8.size + │ - │ 12* │ │ 12* │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ - │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ │ │ │ │ │ #10.size │ │ #10.size │ - │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ ├──────────────────┤ ├──────────────────┤ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ 10* │ │ #5.size + │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ placeholder.size │ │ 9* │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ placeholder.size │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - │ │ │ │ │ │ │ │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ - │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - │ │ │ │ │ │ │ │ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ - │ │ │ │ │ │ │ │ │ 3* │ │ 3* │ │ 3* │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - │ │ │ │ │ │ │ │ │ placeholder.size │ │ placeholder.size │ │ placeholder.size │ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├──────────────────┤ ├──────────────────┤ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ placeholder.size │ │ #14.size │ - └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ + load first page ▶ scroll down ▶ load second page ▶ scroll down far ▶ load third page ▶ load fourth page ▶ scroll down ▶ load fifth page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ 3 * loading.size │ │ #6.size + │ │ #6.size + │ │ #6.size + │ │ #6.size + │ + ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ #7.size + │ │ #7.size + │ │ #7.size + │ │ #7.size + │ + │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ │ │ #8.size │ │ #8.size │ │ #8.size + │ │ #8.size + │ + │ 12 * loading.size │ │ 12 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ + │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ #10.size │ │ #10.size │ + │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ 10 * loading.size │ │ #5.size + │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ 9 * loading.size │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │ │ │ │ │ │ │ │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ + │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ + │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ + │ │ │ │ │ │ │ │ │ 3 * loading.size │ │ 3 * loading.size │ │ 3 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ + │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ loading.size │ │ #14.size │ + └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ ``` @@ -456,53 +456,53 @@ For both cases, it might be helpful to load a range of items instead of a page. Consider total count of 15 items. ``` - load items 0, 1, 2 ▶ scroll down ▶ load items 3, 4 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll down ▶ load item 8 ▶ scroll down ▶ load item 14 -┏┯━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━┯┓ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ -┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ │ #5 │ │ #5 │ │ #5 │ │ #5 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ #6 │ │ #6 │ │ #6 │ │ #6 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ - │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ ┃│ #7 │┃ ┃│ #7 │┃ │ #7 │ │ #7 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ ┃│ #8 LOADING │┃ ┃│ #8 │┃ │ #8 │ │ #8 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ - │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ │ #9 │ │ #9 │ ┃│ #9 │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ │ #12 │ │ #12 │ │ #12 │ ┏┿━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━┿┓ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ │ #13 │ │ #13 │ │ #13 │ ┃│ #13 │┃ ┃│ #13 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ - ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ├──────────────────┤ ┃├──────────────────┤┃ ┃├──────────────────┤┃ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ ┃│ #14 LOADING │┃ ┃│ #14 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ ┗┷━━━━━━━━━━━━━━━━━━┷┛ ┗┷━━━━━━━━━━━━━━━━━━┷┛ + load items 0, 1, 2 ▶ scroll down ▶ load items 3, 4 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll down ▶ load item 8 ▶ scroll down ▶ load item 14 +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ +┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ +┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ +┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ +┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ +┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ │ #5 │ │ #5 │ │ #5 │ │ #5 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ #6 │ │ #6 │ │ #6 │ │ #6 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ + │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ ┃│ #7 │┃ ┃│ #7 │┃ │ #7 │ │ #7 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ + │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ ┃│ #8 LOADING │┃ ┃│ #8 │┃ │ #8 │ │ #8 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ + │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ │ #9 │ │ #9 │ ┃│ #9 │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ + │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ │ #12 │ │ #12 │ │ #12 │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ │ #13 │ │ #13 │ │ #13 │ ┃│ #13 │┃ ┃│ #13 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ + ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ + │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ ┃│ #14 LOADING │┃ ┃│ #14 │┃ + │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ + └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ ``` From da70d3c002719b0dfc95ba32386cd1d160e4f742 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Tue, 5 Oct 2021 21:07:47 +0200 Subject: [PATCH 15/18] docs: try whitespaces in illustrations affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 506 ++++++++++++++-------------- 1 file changed, 253 insertions(+), 253 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 1e9c7d2..8c6b099 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -30,38 +30,38 @@ Consider a social network feed like one on Instagram, Facebook, YouTube, etc. Th Consider page size equals to 3 items. ``` - load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page -┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -┃│ LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ -┃└─────────────────────┘┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ -┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ -┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ -┃ ┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ -┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ -┗━━━━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ - ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ LOADING │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ - │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ - └─────────────────────┘ └─────────────────────┘ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ - ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ #5 │ ┃│ #5 │┃ ┃│ #5 │┃ - │ │ ┃│ │┃ ┃│ │┃ - ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ LOADING │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ - └─────────────────────┘ └─────────────────────┘ ├─────────────────────┤ - │ #7 │ - │ │ - ├─────────────────────┤ - │ #8 │ - │ │ - ├─────────────────────┤ - │ LOADING │ - │ PLACEHOLDER │ - └─────────────────────┘ +                    load first page       ▶         scroll down         ▶       load next page        ▶         scroll down         ▶       load next page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓     ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓      ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐ +┃│       LOADING       │┃     ┃│ #0                  │┃      │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │ +┃│   PLACEHOLDER       │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │ +┃└─────────────────────┘┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      ├─────────────────────┤       ├─────────────────────┤ +┃                       ┃     ┃│ #1                  │┃     ┃│ #1                  │┃     ┃│ #1                  │┃      │ #1                  │       │ #1                  │ +┃                       ┃     ┃│                     │┃     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │ +┃                       ┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤ +┃                       ┃     ┃│ #2                  │┃     ┃│ #2                  │┃     ┃│ #2                  │┃      │ #2                  │       │ #2                  │ +┗━━━━━━━━━━━━━━━━━━━━━━━┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ +                               ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                               │       LOADING       │      ┃│       LOADING       │┃     ┃│ #3                  │┃     ┃│ #3                  │┃     ┃│ #3                  │┃ +                               │     PLACEHOLDER     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃     ┃│                     │┃ +                               └─────────────────────┘       └─────────────────────┘      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                                                                                          ┃│ #4                  │┃     ┃│ #4                  │┃     ┃│ #4                  │┃ +                                                                                          ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃ +                                                                                           ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                                                                                           │ #5                  │      ┃│ #5                  │┃     ┃│ #5                  │┃ +                                                                                           │                     │      ┃│                     │┃     ┃│                     │┃ +                                                                                           ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                                                                                           │       LOADING       │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ +                                                                                           │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │ +                                                                                           └─────────────────────┘       └─────────────────────┘       ├─────────────────────┤ +                                                                                                                                                       │ #7                  │ +                                                                                                                                                       │                     │ +                                                                                                                                                       ├─────────────────────┤ +                                                                                                                                                       │ #8                  │ +                                                                                                                                                       │                     │ +                                                                                                                                                       ├─────────────────────┤ +                                                                                                                                                       │       LOADING       │ +                                                                                                                                                       │     PLACEHOLDER     │ +                                                                                                                                                       └─────────────────────┘ ``` @@ -81,38 +81,38 @@ Consider page size equals to 3 items and [`UseWindowedListOptions.overscanCount` Compare it with the "infinite loading illustration" above to get more insights. ``` - load first page ▶ scroll down ▶ load next page ▶ scroll down ▶ load next page -┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -┃│ LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ -┃└─────────────────────┘┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ #1.size │ │ #1.size │ -┃ ┃ ┃│ #1 │┃ ┃│ #1 │┃ ┃│ #1 │┃ │ │ │ │ -┃ ┃ ┃│ │┃ ┃│ │┃ ┃│ │┃ │ │ │ │ -┃ ┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ -┃ ┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ -┗━━━━━━━━━━━━━━━━━━━━━━━┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ - ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ end space = │ ┃│ LOADING │┃ ┃│ #3 │┃ ┃│ #3 │┃ ┃│ #3 │┃ - │ loading.size │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ ┃│ │┃ - └─────────────────────┘ └─────────────────────┘ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - ┃│ #4 │┃ ┃│ #4 │┃ ┃│ #4 │┃ - ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ end space = │ ┃│ #5 │┃ ┃│ #5 │┃ - │ #5.size + │ ┃│ │┃ ┃│ │┃ - │ loading.size │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ - │ │ │ PLACEHOLDER │ │ │ - └─────────────────────┘ └─────────────────────┘ ├─────────────────────┤ - │ end space = │ - │ #7.size + │ - │ #8.size + │ - │ loading.size │ - │ │ - │ │ - │ │ - │ │ - └─────────────────────┘ +                    load first page       ▶         scroll down         ▶       load next page        ▶         scroll down         ▶       load next page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓     ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓      ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐ +┃│       LOADING       │┃     ┃│ #0                  │┃      │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃      │ #0.size             │       │ #0.size             │       │ #0.size +           │       │ #0.size +           │ +┃└─────────────────────┘┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │ #1.size             │       │ #1.size             │ +┃                       ┃     ┃│ #1                  │┃     ┃│ #1                  │┃     ┃│ #1                  │┃      │                     │       │                     │ +┃                       ┃     ┃│                     │┃     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │ +┃                       ┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤ +┃                       ┃     ┃│ #2                  │┃     ┃│ #2                  │┃     ┃│ #2                  │┃      │ #2                  │       │ #2                  │ +┗━━━━━━━━━━━━━━━━━━━━━━━┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ +                               ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                               │ end space =         │      ┃│       LOADING       │┃     ┃│ #3                  │┃     ┃│ #3                  │┃     ┃│ #3                  │┃ +                               │ loading.size        │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃     ┃│                     │┃ +                               └─────────────────────┘       └─────────────────────┘      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                                                                                          ┃│ #4                  │┃     ┃│ #4                  │┃     ┃│ #4                  │┃ +                                                                                          ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃ +                                                                                           ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                                                                                           │ end space =         │      ┃│ #5                  │┃     ┃│ #5                  │┃ +                                                                                           │ #5.size +           │      ┃│                     │┃     ┃│                     │┃ +                                                                                           │ loading.size        │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ +                                                                                           │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ +                                                                                           │                     │       │     PLACEHOLDER     │       │                     │ +                                                                                           └─────────────────────┘       └─────────────────────┘       ├─────────────────────┤ +                                                                                                                                                       │ end space =         │ +                                                                                                                                                       │ #7.size +           │ +                                                                                                                                                       │ #8.size +           │ +                                                                                                                                                       │ loading.size        │ +                                                                                                                                                       │                     │ +                                                                                                                                                       │                     │ +                                                                                                                                                       │                     │ +                                                                                                                                                       │                     │ +                                                                                                                                                       └─────────────────────┘ ``` @@ -226,53 +226,53 @@ Consider an Internet shop's searching page where resulting items split into page Consider page size equals to 3 items with total count of 15 items. ``` - load first page ▶ scroll down ▶ load second page ▶ scroll down far ▶ load third page ▶ load fourth page ▶ scroll down ▶ load fifth page -┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ -┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ │ #5 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 │ │ #6 │ │ #6 │ │ #6 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 │ │ #7 │ │ #7 │ │ #7 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 │ │ #8 │ │ #8 │ │ #8 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ - │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ - │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ - │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ - └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ +                    load first page       ▶         scroll down         ▶      load second page       ▶       scroll down far       ▶       load third page       ▶       load fourth page      ▶         scroll down         ▶       load fifth page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓     ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓      ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐ +┃│ #0    LOADING       │┃     ┃│ #0                  │┃      │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ +┃│ #1    LOADING       │┃     ┃│ #1                  │┃      │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │                     │       │                     │       │                     │       │                     │       │                     │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ +┃│ #2    LOADING       │┃     ┃│ #2                  │┃     ┃│ #2                  │┃     ┃│ #2                  │┃      │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #3    LOADING       │       │ #3    LOADING       │      ┃│ #3    LOADING       │┃     ┃│ #3                  │┃      │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #4    LOADING       │       │ #4    LOADING       │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #5    LOADING       │       │ #5    LOADING       │       │ #5    LOADING       │       │ #5                  │       │ #5                  │       │ #5                  │       │ #5                  │       │ #5                  │       │ #5                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6                  │       │ #6                  │       │ #6                  │       │ #6                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7                  │       │ #7                  │       │ #7                  │       │ #7                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8                  │       │ #8                  │       │ #8                  │       │ #8                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      ├─────────────────────┤       ├─────────────────────┤ + │ #9    LOADING       │       │ #9    LOADING       │       │ #9    LOADING       │       │ #9    LOADING       │      ┃│ #9    LOADING       │┃     ┃│ #9    LOADING       │┃     ┃│ #9                  │┃      │ #9                  │       │ #9                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤ + │ #10   LOADING       │       │ #10   LOADING       │       │ #10   LOADING       │       │ #10   LOADING       │      ┃│ #10   LOADING       │┃     ┃│ #10   LOADING       │┃     ┃│ #10                 │┃      │ #10                 │       │ #10                 │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │ #11   LOADING       │       │ #11   LOADING       │       │ #11   LOADING       │       │ #11   LOADING       │      ┃│ #11   LOADING       │┃     ┃│ #11   LOADING       │┃     ┃│ #11                 │┃     ┃│ #11                 │┃     ┃│ #11                 │┃ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │      ┃│ #12   LOADING       │┃     ┃│ #12                 │┃ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │      ┃│ #13   LOADING       │┃     ┃│ #13                 │┃ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14                 │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │ + └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘ ``` @@ -292,53 +292,53 @@ Consider page size equals to 3 items with total count of 15 items and [`UseWindo Compare it with the "finite loading illustration" above to get more insights. ``` - load first page ▶ scroll down ▶ load second page ▶ scroll down far ▶ load third page ▶ load fourth page ▶ scroll down ▶ load fifth page -┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ -┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ 3 * loading.size │ │ #6.size + │ │ #6.size + │ │ #6.size + │ │ #6.size + │ - ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ #7.size + │ │ #7.size + │ │ #7.size + │ │ #7.size + │ - │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ │ │ #8.size │ │ #8.size │ │ #8.size + │ │ #8.size + │ - │ 12 * loading.size │ │ 12 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ - │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ #10.size │ │ #10.size │ - │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ 10 * loading.size │ │ #5.size + │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ 9 * loading.size │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ #9 LOADING │┃ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ #10 LOADING │┃ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ - │ │ │ │ │ │ │ │ ┃│ #11 LOADING │┃ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ - │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ - │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ - │ │ │ │ │ │ │ │ │ 3 * loading.size │ │ 3 * loading.size │ │ 3 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ loading.size │ │ #14.size │ - └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ +                    load first page       ▶         scroll down         ▶      load second page       ▶       scroll down far       ▶       load third page       ▶       load fourth page      ▶         scroll down         ▶       load fifth page +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓     ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓      ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐ +┃│ #0    LOADING       │┃     ┃│ #0                  │┃      │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃      │ #0.size             │       │ #0.size             │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │ +┃│ #1    LOADING       │┃     ┃│ #1                  │┃      │ #1                  │       │ #1                  │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │ #4.size +           │       │ #4.size +           │       │ #4.size +           │       │ #4.size +           │       │ #4.size +           │ +┃│ #2    LOADING       │┃     ┃│ #2                  │┃     ┃│ #2                  │┃     ┃│ #2                  │┃      │ #5.size +           │       │ #5.size +           │       │ #5.size +           │       │ #5.size +           │       │ #5.size +           │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │ 3 * loading.size    │       │ #6.size +           │       │ #6.size +           │       │ #6.size +           │       │ #6.size +           │ + ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │ #7.size +           │       │ #7.size +           │       │ #7.size +           │       │ #7.size +           │ + │ end space =         │       │ end space =         │      ┃│ #3    LOADING       │┃     ┃│ #3                  │┃      │                     │       │ #8.size             │       │ #8.size             │       │ #8.size +           │       │ #8.size +           │ + │ 12 * loading.size   │       │ 12 * loading.size   │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │ #9.size +           │       │ #9.size +           │ + │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │       │                     │       │ #10.size            │       │ #10.size            │ + │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │     PLACEHOLDER     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       ├─────────────────────┤       ├─────────────────────┤       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │ end space =         │       │ end space =         │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │ 10 * loading.size   │       │ #5.size +           │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │ 9 * loading.size    │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│ #9    LOADING       │┃     ┃│ #9    LOADING       │┃     ┃│ #9                  │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│     PLACEHOLDER     │┃     ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│ #10   LOADING       │┃     ┃│ #10   LOADING       │┃     ┃│ #10                 │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│     PLACEHOLDER     │┃     ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │                     │       │                     │       │                     │       │                     │      ┃│ #11   LOADING       │┃     ┃│ #11   LOADING       │┃     ┃│ #11                 │┃     ┃│ #11                 │┃     ┃│ #11                 │┃ + │                     │       │                     │       │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃ + │                     │       │                     │       │                     │       │                     │       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │                     │       │                     │       │                     │       │                     │       │ end space =         │       │ end space =         │       │ end space =         │      ┃│ #12   LOADING       │┃     ┃│ #12                 │┃ + │                     │       │                     │       │                     │       │                     │       │ 3 * loading.size    │       │ 3 * loading.size    │       │ 3 * loading.size    │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃│ #13   LOADING       │┃     ┃│ #13                 │┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       ├─────────────────────┤       ├─────────────────────┤ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ end space =         │       │ end space =         │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ loading.size        │       │ #14.size            │ + └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘ ``` @@ -456,53 +456,53 @@ For both cases, it might be helpful to load a range of items instead of a page. Consider total count of 15 items. ``` - load items 0, 1, 2 ▶ scroll down ▶ load items 3, 4 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll down ▶ load item 8 ▶ scroll down ▶ load item 14 -┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ │ #0 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ │ #1 │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ │ #2 │ -┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #3 LOADING │ │ #3 LOADING │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ │ #3 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #4 LOADING │ │ #4 LOADING │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ │ #4 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ │ #5 LOADING │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ │ #5 │ │ #5 │ │ #5 │ │ #5 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ │ #6 LOADING │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ #6 │ │ #6 │ │ #6 │ │ #6 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ - │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ │ #7 LOADING │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ ┃│ #7 │┃ ┃│ #7 │┃ │ #7 │ │ #7 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ - │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ │ #8 LOADING │ ┃│ #8 LOADING │┃ ┃│ #8 │┃ │ #8 │ │ #8 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ - │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ │ #9 LOADING │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ │ #9 │ │ #9 │ ┃│ #9 │┃ ┃│ #9 │┃ │ #9 │ │ #9 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ │ #10 LOADING │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ │ #10 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ │ #11 LOADING │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ │ #11 │ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ - │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ │ #12 LOADING │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ #12 │ │ #12 │ │ #12 │ │ #12 │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ │ #13 LOADING │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ #13 │ │ #13 │ │ #13 │ │ #13 │ ┃│ #13 │┃ ┃│ #13 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ - ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ │ #14 LOADING │ ┃│ #14 LOADING │┃ ┃│ #14 │┃ - │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ │ PLACEHOLDER │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ +                  load items 0, 1, 2      ▶         scroll down         ▶       load items 3, 4       ▶         scroll down         ▶    load items 9, 10, 11     ▶         scroll down         ▶      load items 12, 13      ▶          scroll up          ▶     load items 5, 6, 7      ▶         scroll down         ▶         load item 8         ▶         scroll down         ▶         load item 14 +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓     ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓      ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐ +┃│ #0    LOADING       │┃     ┃│ #0                  │┃      │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │       │ #0                  │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ +┃│ #1    LOADING       │┃     ┃│ #1                  │┃      │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │       │ #1                  │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ +┃│ #2    LOADING       │┃     ┃│ #2                  │┃     ┃│ #2                  │┃     ┃│ #2                  │┃      │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │       │ #2                  │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #3    LOADING       │       │ #3    LOADING       │      ┃│ #3    LOADING       │┃     ┃│ #3                  │┃      │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │       │ #3                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #4    LOADING       │       │ #4    LOADING       │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │       │ #4                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #5    LOADING       │       │ #5    LOADING       │       │ #5    LOADING       │       │ #5    LOADING       │       │ #5    LOADING       │       │ #5    LOADING       │       │ #5    LOADING       │       │ #5    LOADING       │      ┃│ #5    LOADING       │┃     ┃│ #5                  │┃      │ #5                  │       │ #5                  │       │ #5                  │       │ #5                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │       │ #6    LOADING       │      ┃│ #6    LOADING       │┃     ┃│ #6                  │┃      │ #6                  │       │ #6                  │       │ #6                  │       │ #6                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      ├─────────────────────┤       ├─────────────────────┤ + │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │       │ #7    LOADING       │      ┃│ #7    LOADING       │┃     ┃│ #7                  │┃     ┃│ #7                  │┃     ┃│ #7                  │┃      │ #7                  │       │ #7                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤ + │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │       │ #8    LOADING       │      ┃│ #8    LOADING       │┃     ┃│ #8                  │┃      │ #8                  │       │ #8                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤ + │ #9    LOADING       │       │ #9    LOADING       │       │ #9    LOADING       │       │ #9    LOADING       │      ┃│ #9    LOADING       │┃     ┃│ #9                  │┃      │ #9                  │       │ #9                  │       │ #9                  │       │ #9                  │      ┃│ #9                  │┃     ┃│ #9                  │┃      │ #9                  │       │ #9                  │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #10   LOADING       │       │ #10   LOADING       │       │ #10   LOADING       │       │ #10   LOADING       │      ┃│ #10   LOADING       │┃     ┃│ #10                 │┃      │ #10                 │       │ #10                 │       │ #10                 │       │ #10                 │       │ #10                 │       │ #10                 │       │ #10                 │       │ #10                 │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #11   LOADING       │       │ #11   LOADING       │       │ #11   LOADING       │       │ #11   LOADING       │      ┃│ #11   LOADING       │┃     ┃│ #11                 │┃     ┃│ #11                 │┃     ┃│ #11                 │┃      │ #11                 │       │ #11                 │       │ #11                 │       │ #11                 │       │ #11                 │       │ #11                 │ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤ + │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │       │ #12   LOADING       │      ┃│ #12   LOADING       │┃     ┃│ #12                 │┃      │ #12                 │       │ #12                 │       │ #12                 │       │ #12                 │      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │      ┃│                     │┃     ┃│                     │┃ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │       │ #13   LOADING       │      ┃│ #13   LOADING       │┃     ┃│ #13                 │┃      │ #13                 │       │ #13                 │       │ #13                 │       │ #13                 │      ┃│ #13                 │┃     ┃│ #13                 │┃ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │                     │       │                     │       │                     │       │                     │      ┃│                     │┃     ┃│                     │┃ + ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │       │ #14   LOADING       │      ┃│ #14   LOADING       │┃     ┃│ #14                 │┃ + │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │       │     PLACEHOLDER     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃ + └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘      ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛     ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ ``` @@ -519,56 +519,56 @@ Let's implement the `RangedSearchResult` windowed component with finite items lo Consider total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. -Compare it with the "range loading illustration" above to get more insights. +Compare it with the “range loading illustration” above to get more insights. ``` - load items 0, 1, 2 ▶ scroll down ▶ load items 3, 4 ▶ scroll down ▶ load items 9, 10, 11 ▶ scroll down ▶ load items 12, 13 ▶ scroll up ▶ load items 5, 6, 7 ▶ scroll down ▶ load item 8 ▶ scroll down ▶ load item 14 -┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ -┃│ #0 LOADING │┃ ┃│ #0 │┃ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ │ start space = │ -┃│ PLACEHOLDER │┃ ┃│ │┃ │ #0.size │ │ #0.size │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ │ #0.size + │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ├─────────────────────┤ ├─────────────────────┤ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ │ #1.size + │ -┃│ #1 LOADING │┃ ┃│ #1 │┃ │ #1 │ │ #1 │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ │ #2.size + │ -┃│ PLACEHOLDER │┃ ┃│ │┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ │ #3.size + │ -┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size │ │ #4.size │ │ #4.size + │ │ #4.size + │ │ #4.size + │ │ #4.size + │ -┃│ #2 LOADING │┃ ┃│ #2 │┃ ┃│ #2 │┃ ┃│ #2 │┃ │ 4 * loading.size │ │ 4 * loading.size │ │ 4 * loading.size + │ │ 4 * loading.size + │ │ │ │ │ │ #5.size + │ │ #5.size + │ │ #5.size + │ │ #5.size + │ -┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ #9.size + │ │ #9.size + │ │ │ │ │ │ #6.size │ │ #6.size │ │ #6.size + │ │ #6.size + │ - ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ #10.size │ │ #10.size │ │ │ │ │ │ │ │ │ │ #7.size + │ │ #7.size + │ - │ end space = │ │ end space = │ ┃│ #3 LOADING │┃ ┃│ #3 │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #8.size + │ │ #8.size + │ - │ 12 * loading.size │ │ 12 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #9.size + │ │ #9.size + │ - │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #10.size + │ │ #10.size + │ - │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ #11.size │ │ #11.size │ - │ │ │ │ │ PLACEHOLDER │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ - │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ │ │ │ - │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ ┃│ #5 LOADING │┃ ┃│ #5 │┃ │ │ │ │ │ │ │ │ - │ │ │ │ │ 10 * loading.size │ │ 10 * loading.size │ │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #6 LOADING │┃ ┃│ #6 │┃ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #7 LOADING │┃ ┃│ #7 │┃ ┃│ #7 │┃ ┃│ #7 │┃ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ ┃│ #8 LOADING │┃ ┃│ #8 │┃ │ │ │ │ - │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ loading.size + │ │ loading.size + │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ │ │ │ │ #8.size + │ │ #8.size + │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ #9 LOADING │┃ ┃│ #9 │┃ │ │ │ │ │ #9.size + │ │ #9.size + │ ┃│ #9 │┃ ┃│ #9 │┃ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ #10.size + │ │ #10.size + │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ - │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ #11.size + │ │ #11.size + │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ #10 LOADING │┃ ┃│ #10 │┃ │ │ │ │ │ #12.size + │ │ #12.size + │ │ end space = │ │ end space = │ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ #13.size + │ │ #13.size + │ │ #10.size + │ │ #10.size + │ │ │ │ │ - │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ │ loading.size │ │ loading.size │ │ #11.size + │ │ #11.size + │ │ │ │ │ - │ │ │ │ │ │ │ │ ┃│ #11 LOADING │┃ ┃│ #11 │┃ ┃│ #11 │┃ ┃│ #11 │┃ │ │ │ │ │ #12.size + │ │ #12.size + │ │ │ │ │ - │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┃│ │┃ ┃│ │┃ │ │ │ │ │ #13.size + │ │ #13.size + │ │ │ │ │ - │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ loading.size │ │ loading.size │ ├─────────────────────┤ ├─────────────────────┤ - │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ ┃│ #12 LOADING │┃ ┃│ #12 │┃ │ │ │ │ │ │ │ │ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ - │ │ │ │ │ │ │ │ │ 3 * loading.size │ │ 3 * loading.size │ ┃│ PLACEHOLDER │┃ ┃│ │┃ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ - │ │ │ │ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ │ │ │ │ │ │ │ │ │ │ │ ┃│ #13 LOADING │┃ ┃│ #13 │┃ │ │ │ │ │ │ │ │ ┃│ #13 │┃ ┃│ #13 │┃ - │ │ │ │ │ │ │ │ │ │ │ │ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛ │ │ │ │ │ │ │ │ ┃│ │┃ ┃│ │┃ - │ │ │ │ │ │ │ │ │ │ │ │ ├─────────────────────┤ ├─────────────────────┤ │ │ │ │ │ │ │ │ ┃├─────────────────────┤┃ ┃├─────────────────────┤┃ - │ │ │ │ │ │ │ │ │ │ │ │ │ end space = │ │ end space = │ │ │ │ │ │ │ │ │ ┃│ #14 LOADING │┃ ┃│ #14 │┃ - │ │ │ │ │ │ │ │ │ │ │ │ │ loading.size │ │ loading.size │ │ │ │ │ │ │ │ │ ┃│ PLACEHOLDER │┃ ┃│ │┃ - └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ +                  load items 0, 1, 2      ▶         scroll down         ▶       load items 3, 4       ▶         scroll down         ▶    load items 9, 10, 11     ▶         scroll down         ▶      load items 12, 13      ▶          scroll up          ▶     load items 5, 6, 7      ▶         scroll down         ▶         load item 8         ▶         scroll down         ▶         load item 14 +┏┯━━━━━━━━━━━━━━━━━━━━━┯┓     ┏┯━━━━━━━━━━━━━━━━━━━━━┯┓      ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐       ┌─────────────────────┐ +┃│ #0    LOADING       │┃     ┃│ #0                  │┃      │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │       │ start space =       │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃      │ #0.size             │       │ #0.size             │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │       │ #0.size +           │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃      ├─────────────────────┤       ├─────────────────────┤       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │       │ #1.size +           │ +┃│ #1    LOADING       │┃     ┃│ #1                  │┃      │ #1                  │       │ #1                  │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │       │ #2.size +           │ +┃│     PLACEHOLDER     │┃     ┃│                     │┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │       │ #3.size +           │ +┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │ #4.size +           │       │ #4.size +           │       │ #4.size +           │       │ #4.size +           │       │ #4.size             │       │ #4.size             │       │ #4.size +           │       │ #4.size +           │       │ #4.size +           │       │ #4.size +           │ +┃│ #2    LOADING       │┃     ┃│ #2                  │┃     ┃│ #2                  │┃     ┃│ #2                  │┃      │ 4 * loading.size    │       │ 4 * loading.size    │       │ 4 * loading.size +  │       │ 4 * loading.size +  │       │                     │       │                     │       │ #5.size +           │       │ #5.size +           │       │ #5.size +           │       │ #5.size +           │ +┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │       │ #9.size +           │       │ #9.size +           │       │                     │       │                     │       │ #6.size             │       │ #6.size             │       │ #6.size +           │       │ #6.size +           │ + ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │       │ #10.size            │       │ #10.size            │       │                     │       │                     │       │                     │       │                     │       │ #7.size +           │       │ #7.size +           │ + │ end space =         │       │ end space =         │      ┃│ #3    LOADING       │┃     ┃│ #3                  │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ #8.size +           │       │ #8.size +           │ + │ 12 * loading.size   │       │ 12 * loading.size   │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ #9.size +           │       │ #9.size +           │ + │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ #10.size +          │       │ #10.size +          │ + │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ #11.size            │       │ #11.size            │ + │                     │       │                     │       │   PLACEHOLDER       │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       ├─────────────────────┤       ├─────────────────────┤       │                     │       │                     │       │                     │       │                     │      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │ end space =         │       │ end space =         │       │                     │       │                     │       │                     │       │                     │      ┃│ #5    LOADING       │┃     ┃│ #5                  │┃      │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │ 10 * loading.size   │       │ 10 * loading.size   │       │                     │       │                     │       │                     │       │                     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃│ #6    LOADING       │┃     ┃│ #6                  │┃      │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃│ #7    LOADING       │┃     ┃│ #7                  │┃     ┃│ #7                  │┃     ┃│ #7                  │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ end space =         │       │ end space =         │      ┃│ #8    LOADING       │┃     ┃│ #8                  │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ loading.size +      │       │ loading.size +      │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │                     │       │                     │       │ #8.size +           │       │ #8.size +           │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│ #9    LOADING       │┃     ┃│ #9                  │┃      │                     │       │                     │       │ #9.size +           │       │ #9.size +           │      ┃│ #9                  │┃     ┃│ #9                  │┃      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │ #10.size +          │       │ #10.size +          │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │       │ #11.size +          │       │ #11.size +          │       ├─────────────────────┤       ├─────────────────────┤       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│ #10   LOADING       │┃     ┃│ #10                 │┃      │                     │       │                     │       │ #12.size +          │       │ #12.size +          │       │ end space =         │       │ end space =         │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │ #13.size +          │       │ #13.size +          │       │ #10.size +          │       │ #10.size +          │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓      │ loading.size        │       │ loading.size        │       │ #11.size +          │       │ #11.size +          │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┃│ #11   LOADING       │┃     ┃│ #11                 │┃     ┃│ #11                 │┃     ┃│ #11                 │┃      │                     │       │                     │       │ #12.size +          │       │ #12.size +          │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┃│                     │┃     ┃│                     │┃      │                     │       │                     │       │ #13.size +          │       │ #13.size +          │       │                     │       │                     │ + │                     │       │                     │       │                     │       │                     │       ├─────────────────────┤       ├─────────────────────┤      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │       │ loading.size        │       │ loading.size        │       ├─────────────────────┤       ├─────────────────────┤ + │                     │       │                     │       │                     │       │                     │       │ end space =         │       │ end space =         │      ┃│ #12   LOADING       │┃     ┃│ #12                 │┃      │                     │       │                     │       │                     │       │                     │      ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓     ┏┿━━━━━━━━━━━━━━━━━━━━━┿┓ + │                     │       │                     │       │                     │       │                     │       │ 3 * loading.size    │       │ 3 * loading.size    │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃      │                     │       │                     │       │                     │       │                     │      ┃│                     │┃     ┃│                     │┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃      │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┃│ #13   LOADING       │┃     ┃│ #13                 │┃      │                     │       │                     │       │                     │       │                     │      ┃│ #13                 │┃     ┃│ #13                 │┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │      ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛     ┗┿━━━━━━━━━━━━━━━━━━━━━┿┛      │                     │       │                     │       │                     │       │                     │      ┃│                     │┃     ┃│                     │┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       ├─────────────────────┤       ├─────────────────────┤       │                     │       │                     │       │                     │       │                     │      ┃├─────────────────────┤┃     ┃├─────────────────────┤┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ end space =         │       │ end space =         │       │                     │       │                     │       │                     │       │                     │      ┃│ #14   LOADING       │┃     ┃│ #14                 │┃ + │                     │       │                     │       │                     │       │                     │       │                     │       │                     │       │ loading.size        │       │ loading.size        │       │                     │       │                     │       │                     │       │                     │      ┃│     PLACEHOLDER     │┃     ┃│                     │┃ + └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘       └─────────────────────┘      ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛     ┗┷━━━━━━━━━━━━━━━━━━━━━┷┛ ``` From 18395c718a3fa54bbece11363211f987e4baf4e7 Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Tue, 5 Oct 2021 21:13:59 +0200 Subject: [PATCH 16/18] chore: run typograph on use-items-loader readme affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 50 ++++++++++++++--------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 8c6b099..f177dd6 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -1,6 +1,6 @@ # `use-items-loader` -React hook to manage pagination or infinite loading of a windowed list items. +React hook to manage pagination or infinite loading of a windowed list items. ## Getting started @@ -18,16 +18,16 @@ npm install @react-hook-window/use-items-loader --save ## Infinite loading usage -Consider a social network feed like one on Instagram, Facebook, YouTube, etc. That case is an infinite loading list, where an application can always render a loading placeholder while the next page is loading. As soon as the loading placeholder becomes visible, the app starts the next page loading. +Consider a social network feed like one on Instagram, Facebook, YouTube, etc. That case is an infinite loading list, where an application can always render a loading placeholder while the next page is loading. As soon as the loading placeholder becomes visible, the app starts the next page loading.
- Show an infinite loading illustration. + Show an infinite loading illustration.
-Consider page size equals to 3 items. +Consider page size equals to 3 items. ```                     load first page       ▶         scroll down         ▶       load next page        ▶         scroll down         ▶       load next page @@ -67,18 +67,18 @@ Consider page size equals to 3 items.
-Let's implement the `InfiniteFeed` windowed component with infinite items loading. Here is a [live demo][todo] with [source code][todo]. +Let’s implement the `InfiniteFeed` windowed component with infinite items loading. Here is a [live demo][todo] with [source code][todo].
- Show a windowed infinite loading illustration. + Show a windowed infinite loading illustration.
-Consider page size equals to 3 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. +Consider page size equals to 3 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. -Compare it with the "infinite loading illustration" above to get more insights. +Compare it with the “infinite loading illustration” above to get more insights. ```                     load first page       ▶         scroll down         ▶       load next page        ▶         scroll down         ▶       load next page @@ -212,18 +212,18 @@ export const InfiniteFeed: React.VFC<{ } ``` -## Finite loading (aka pagination) usage +## Finite loading (pagination) usage -Consider an Internet shop's searching page where resulting items split into pages. That case is a finite loading list, where an application knows a total count of items but loads them page by page when a user scrolls to an unloaded area. The app might render loading placeholders instead of all unloaded items since the total count is known ahead. +Consider an Internet shop’s searching page where resulting items split into pages. That case is a finite loading list, where an application knows a total count of items but loads them page by page when a user scrolls to an unloaded area. The app might render loading placeholders instead of all unloaded items since the total count is known ahead.
- Show a finite loading illustration. + Show a finite loading illustration.
-Consider page size equals to 3 items with total count of 15 items. +Consider page size equals to 3 items with total count of 15 items. ```                     load first page       ▶         scroll down         ▶      load second page       ▶       scroll down far       ▶       load third page       ▶       load fourth page      ▶         scroll down         ▶       load fifth page @@ -278,18 +278,18 @@ Consider page size equals to 3 items with total count of 15 items.
-Let's implement the `SearchResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo]. +Let’s implement the `SearchResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo].
- Show a windowed finite loading illustration. + Show a windowed finite loading illustration.
-Consider page size equals to 3 items with total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. +Consider page size equals to 3 items with total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. -Compare it with the "finite loading illustration" above to get more insights. +Compare it with the “finite loading illustration” above to get more insights. ```                     load first page       ▶         scroll down         ▶      load second page       ▶       scroll down far       ▶       load third page       ▶       load fourth page      ▶         scroll down         ▶       load fifth page @@ -439,21 +439,21 @@ export const SearchResult: React.VFC<{ ## Range loading usage -The finite loading use case above might be a bit underwhelming for some use cases. +The finite loading use case above might be a bit underwhelming for some use cases. -1. The app might not need to load an entire page but only a few items. -2. The app might need to load a far away page. +1. The app might not need to load an entire page but only a few items. +2. The app might need to load a far away page. -For both cases, it might be helpful to load a range of items instead of a page. That case is a range loading list, where an application knows a total count of items and can fetch a range of them when a user scrolls to unloaded items. The app might render loading placeholders since the total count is known ahead. +For both cases, it might be helpful to load a range of items instead of a page. That case is a range loading list, where an application knows a total count of items and can fetch a range of them when a user scrolls to unloaded items. The app might render loading placeholders since the total count is known ahead.
- Show a range loading illustration. + Show a range loading illustration.
-Consider total count of 15 items. +Consider total count of 15 items. ```                   load items 0, 1, 2      ▶         scroll down         ▶       load items 3, 4       ▶         scroll down         ▶    load items 9, 10, 11     ▶         scroll down         ▶      load items 12, 13      ▶          scroll up          ▶     load items 5, 6, 7      ▶         scroll down         ▶         load item 8         ▶         scroll down         ▶         load item 14 @@ -508,16 +508,16 @@ Consider total count of 15 items.
-Let's implement the `RangedSearchResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo]. +Let’s implement the `RangedSearchResult` windowed component with finite items loading. Here is a [live demo][todo] with [source code][todo].
- Show a windowed range loading illustration. + Show a windowed range loading illustration.
-Consider total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. +Consider total count of 15 items and [`UseWindowedListOptions.overscanCount`][use-windowed-list-options.overscan-count] equals 0. Compare it with the “range loading illustration” above to get more insights. From 2c0014f330acff486ac3135a34e3edf01c416d0f Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Thu, 7 Oct 2021 22:01:15 +0200 Subject: [PATCH 17/18] docs: add windowed range code example affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 101 +++++++++++++++++++++++++++- 1 file changed, 100 insertions(+), 1 deletion(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index f177dd6..2533b7a 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -372,7 +372,7 @@ export const SearchResult: React.VFC<{ } = useWindowedList({ containerSize: SEARCH_CONTAINER_HEIGHT, itemSize: SEARCH_ITEM_HEIGHT, - // 1. Pass total count but not searchItems.length + // 1. Pass total count but not searchItems.length. itemCount: searchItemsTotalCount }) @@ -574,6 +574,105 @@ Compare it with the “range loading illustration” above to get more insigh
+```tsx +import { useWindowedList } from '@react-hook-window/use-windowed-list' +import { + LoadingItemsRange, + useItemsLoader +} from '@react-hook-window/use-items-loader' + +type Loadable = + | { type: 'NOT_LOADED' } + | { type: 'LOADING' } + | { type: 'LOADED'; data: T } + +interface SearchItem { + id: string + content: string +} + +export const SearchResult: React.VFC<{ + loadableItems: Array> + loadItemsRange(fromIndex: number, count: number): void +}> = ({ loadableItems, loadItemsRange }) => { + const { + setContainerRef, + startSpace, + endSpace, + indexes, + isScrolling, + overscanFromIndex, + overscanBeforeIndex + } = useWindowedList({ + containerSize: SEARCH_CONTAINER_HEIGHT, + itemSize: SEARCH_ITEM_HEIGHT, + // 1. Pass total loadableItems.length as it represents the search items' total count. + itemCount: loadableItems.length + }) + + useItemsLoader({ + // 2. Skip the loading while isScrolling + skip: isScrolling, + overscanFromIndex, + overscanBeforeIndex, + shouldLoadItem: React.useCallback( + // 3. Loadable items with NOT_LOADED type should be loaded. + (index: number) => index >= loadableItems[index].type === 'NOT_LOADED', + [loadableItems] + ), + loadItemsRange: React.useCallback( + // 4. Load the visible range. + ({ loadFromIndex, loadCount }: LoadingItemsRange) => { + loadItemsRange(loadFromIndex, loadCount) + }, + [loadItemsRange] + ) + }) + + return ( +
+
+ + {indexes.map(index => { + const loadableItem = loadableItems[index] + + // 5. Render loading placeholders for both NOT_LOADED and LOADING. + if (loadableItem.type !== 'LOADED') { + return ( +
+ LOADING PLACEHOLDER +
+ ) + } + + return ( +
+ {loadableItem.content} +
+ ) + })} + +
+
+ ) +} +``` + [todo]: #i-am-sorry-it-is-not-done-yet From bb822dc79d760e5313fdad03b26fad1e5af45c5f Mon Sep 17 00:00:00 2001 From: Anton Ovechkin Date: Thu, 7 Oct 2021 22:02:20 +0200 Subject: [PATCH 18/18] docs: fix loadable.data usage affects: @react-hook-window/use-items-loader --- packages/use-items-loader/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/use-items-loader/README.md b/packages/use-items-loader/README.md index 2533b7a..fc6932b 100644 --- a/packages/use-items-loader/README.md +++ b/packages/use-items-loader/README.md @@ -658,11 +658,11 @@ export const SearchResult: React.VFC<{ return (
- {loadableItem.content} + {loadableItem.data.content}
) })}