mary.my.id
personal web client for Bluesky
typescript
solidjs
bluesky
atcute
refactor: improve on lists a little bit
+18
-7
src/components/list.tsx
+18
-7
src/components/list.tsx
···
3
3
import { getQueryErrorInfo } from '~/api/utils/query';
4
4
5
5
import { ifIntersect } from '~/lib/element-refs';
6
+
import { useIsFocused } from '~/lib/navigation/router';
6
7
7
8
import CircularProgress from './circular-progress';
8
-
import EndOfListView from './end-of-list-view';
9
9
import ErrorView from './error-view';
10
10
11
11
export interface ListProps<T> {
···
93
93
<div
94
94
ref={(node) => {
95
95
if (onEndReached) {
96
-
ifIntersect(node, () => !props.isFetchingNextPage && props.hasNextPage, onEndReached, {
97
-
rootMargin: `150% 0%`,
98
-
});
96
+
const isFocused = useIsFocused();
97
+
98
+
ifIntersect(
99
+
node,
100
+
() => !props.isFetchingNextPage && !props.isRefreshing && props.hasNextPage && isFocused(),
101
+
onEndReached,
102
+
{ rootMargin: '200% 0%' },
103
+
);
99
104
}
100
105
}}
101
-
class="grid h-13 shrink-0 place-items-center"
106
+
class="h-[50svh] shrink-0"
102
107
>
103
-
<CircularProgress />
108
+
<div class="grid place-items-center py-8">
109
+
<CircularProgress />
110
+
</div>
104
111
</div>
105
112
</Match>
106
113
107
114
<Match when={props.data}>
108
-
<EndOfListView />
115
+
<div class="h-[50svh] shrink-0">
116
+
<div class="grid place-items-center py-8">
117
+
<div class="h-1 w-1 rounded-full bg-contrast-muted"></div>
118
+
</div>
119
+
</div>
109
120
</Match>
110
121
</Switch>
111
122
</div>
+10
-5
src/components/paged-list.tsx
+10
-5
src/components/paged-list.tsx
···
6
6
import { useIsFocused } from '~/lib/navigation/router';
7
7
8
8
import CircularProgress from './circular-progress';
9
-
import EndOfListView from './end-of-list-view';
10
9
import ErrorView from './error-view';
11
10
12
11
export interface PagedListProps<T> {
···
100
99
node,
101
100
() => !props.isFetchingNextPage && !props.isRefreshing && props.hasNextPage && isFocused(),
102
101
onEndReached,
103
-
{ rootMargin: '150% 0%' },
102
+
{ rootMargin: '200% 0%' },
104
103
);
105
104
}
106
105
}}
107
-
class="grid h-13 shrink-0 place-items-center"
106
+
class="h-[50svh] shrink-0"
108
107
>
109
-
<CircularProgress />
108
+
<div class="grid place-items-center py-8">
109
+
<CircularProgress />
110
+
</div>
110
111
</div>
111
112
</Match>
112
113
113
114
<Match when={hasFallback && isEmpty()}>{props.fallback}</Match>
114
115
115
116
<Match when={props.data}>
116
-
<EndOfListView />
117
+
<div class="h-[50svh] shrink-0">
118
+
<div class="grid place-items-center py-8">
119
+
<div class="h-1 w-1 rounded-full bg-contrast-muted"></div>
120
+
</div>
121
+
</div>
117
122
</Match>
118
123
</Switch>
119
124
</div>