rkulinski Github contribution chart
rkulinski Github Stats
rkulinski Most Used Languages

Activity

27 Sep 2022

Issue Comment

Rkulinski

Split ranger core
Forked On 27 Sep 2022 at 06:07:09

Rkulinski

@tannerlinsley split is ready, although I can see there are some checks failing and other examples (except basic) needs migrations.

Commented On 27 Sep 2022 at 06:07:09

Rkulinski

Remove cast

Pushed On 27 Sep 2022 at 06:05:47

Rkulinski

Improve types

Pushed On 27 Sep 2022 at 06:04:49

Rkulinski

Split ranger core

Created On 27 Sep 2022 at 03:53:07

Rkulinski

Migrate to new repo structure

Created On 27 Sep 2022 at 03:52:11

Rkulinski

Migrate to new repo structure

Created On 27 Sep 2022 at 03:37:21

Rkulinski

Update deps

Pushed On 27 Sep 2022 at 03:37:14

Rkulinski

Fix build

Pushed On 16 Aug 2022 at 06:09:52

Rkulinski

Use build config from react virtual

Pushed On 16 Aug 2022 at 05:53:56

Rkulinski

Move ranger basic ranger example to react subfolder

Pushed On 16 Aug 2022 at 05:14:33

Rkulinski

Use yarn

Pushed On 16 Aug 2022 at 04:04:11

Rkulinski

Use npm instead of yarn

Pushed On 16 Aug 2022 at 04:01:49

Rkulinski

Add to contributors

Pushed On 15 Aug 2022 at 05:30:51
Issue Comment

Rkulinski

Infinite-scrolling example not working using the scrollbar

What version of Remix are you using?

1.6.4

Steps to Reproduce

Open examples/infinte-scrolling and select page/simple.

Expected Behavior

When I scroll by grabbing scroll bar to bottom I should see all the elements loaded.

Actual Behavior

Elements displays as Nothing to see here... Screen Shot 2022-08-01 at 10 13 51

I think you might want to change:

 const rowVirtualizer = useVirtual({
    size: data.totalItems,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

to

 const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

Otherwise this is generating many problems like calling issues when scrolling fast or throwing warnings:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 

Forked On 15 Aug 2022 at 05:26:07

Rkulinski

@kentcdodds Really simple change: https://github.com/remix-run/remix/pull/4003

Commented On 15 Aug 2022 at 05:26:07

Rkulinski

Use fetched item count for simple examples

Created On 15 Aug 2022 at 05:25:43

Rkulinski

Use fetched item count for simple examples

Pushed On 15 Aug 2022 at 05:24:41
Create Branch
Rkulinski In rkulinski/remix Create Branchrkulinski/fix-infinite-scroll-examples

Rkulinski

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

On 15 Aug 2022 at 05:23:35

Rkulinski

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Forked On 15 Aug 2022 at 05:22:17

Rkulinski

Update README.md

Pushed On 15 Aug 2022 at 10:54:54
Issue Comment

Rkulinski

Infinite-scrolling example not working using the scrollbar

What version of Remix are you using?

1.6.4

Steps to Reproduce

Open examples/infinte-scrolling and select page/simple.

Expected Behavior

When I scroll by grabbing scroll bar to bottom I should see all the elements loaded.

Actual Behavior

Elements displays as Nothing to see here... Screen Shot 2022-08-01 at 10 13 51

I think you might want to change:

 const rowVirtualizer = useVirtual({
    size: data.totalItems,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

to

 const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

Otherwise this is generating many problems like calling issues when scrolling fast or throwing warnings:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 

Forked On 01 Aug 2022 at 02:40:45

Rkulinski

I don't have a Twitter, but e.g. 9gag is using the same pattern: https://9gag.com/

Although it seems like a cool thing to display scrollbar as if all items are already loaded it is causing many technical obstacles. And when I think about it more UX is not ideal as well. Let's say list is 30k elements. With such number of items scroll is not precise anyway, so I think it's not that useful.

Commented On 01 Aug 2022 at 02:40:45
Issue Comment

Rkulinski

Infinite-scrolling example not working using the scrollbar

What version of Remix are you using?

1.6.4

Steps to Reproduce

Open examples/infinte-scrolling and select page/simple.

Expected Behavior

When I scroll by grabbing scroll bar to bottom I should see all the elements loaded.

Actual Behavior

Elements displays as Nothing to see here... Screen Shot 2022-08-01 at 10 13 51

I think you might want to change:

 const rowVirtualizer = useVirtual({
    size: data.totalItems,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

to

 const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

Otherwise this is generating many problems like calling issues when scrolling fast or throwing warnings:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 

Forked On 01 Aug 2022 at 10:41:13

Rkulinski

Yeah it does. Although in my scenario I had to some more tweaks to make it work.

I agree that scrollbar is jumpy, but if there would be a wish to have scrollbar mimic fully loaded data set it would require refactoring of how items are loaded into array (currently the problem is that due to so many state changes some of them seems to be skipped, hence indexes mismatch).

Maybe, before making code changes it would be a good idea to discuss and have a clear goal for this example.

Commented On 01 Aug 2022 at 10:41:13
Issue Comment

Rkulinski

Infinite-scrolling example not working

What version of Remix are you using?

1.6.4

Steps to Reproduce

Open examples/infinte-scrolling and select page/simple.

Expected Behavior

When I scroll by grabbing scroll bar to bottom I should see all the elements loaded.

Actual Behavior

Elements displays as Nothing to see here... Screen Shot 2022-08-01 at 10 13 51

I think you might want to change:

 const rowVirtualizer = useVirtual({
    size: data.totalItems,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

to

 const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  }); 

Otherwise this is generating many problems like calling issues when scrolling fast or throwing warnings:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 

Forked On 01 Aug 2022 at 08:52:29

Rkulinski

Thanks for such a short reply. I cannot run this example on code sandbox - not sure what is wrong, but I'm getting blank screen. I downloaded repo and run it.

Firefox``` 

Commented On 01 Aug 2022 at 08:52:29