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