refactor: consistent end of list view

src/components/composer/dialogs/language-select-dialog.tsx

···
 
 import Button from '../../button';
 import * as Dialog from '../../dialog';
+import EndOfListView from '../../end-of-list-view';
 import CheckOutlinedIcon from '../../icons-central/check-outline';
 import SearchInput from '../../search-input';
 
···
 						</For>
 					</div>
 
-					<div class="grid h-13 shrink-0 place-items-center">
-						<p class="text-sm text-contrast-muted">End of list</p>
-					</div>
+					<EndOfListView />
 				</Dialog.Body>
 			</Dialog.Container>
 		</>

src/components/composer/gifs/gif-search-dialog.tsx

···
 
 import CircularProgress from '../../circular-progress';
 import * as Dialog from '../../dialog';
+import EndOfListView from '../../end-of-list-view';
 import ErrorView from '../../error-view';
 import SearchInput from '../../search-input';
 import VirtualItem from '../../virtual-item';
···
 						</Match>
 
 						<Match when>
-							<div class="grid h-13 shrink-0 place-items-center">
-								<p class="text-sm text-contrast-muted">End of list</p>
-							</div>
+							<EndOfListView />
 						</Match>
 					</Switch>
 				</Dialog.Body>

src/components/end-of-list-view.tsx

···
+const EndOfListView = () => {
+	return (
+		<div class="grid h-13 place-items-center">
+			<div class="h-1 w-1 rounded-full bg-contrast-muted"></div>
+		</div>
+	);
+};
+
+export default EndOfListView;

src/components/list.tsx

···
 import { ifIntersect } from '~/lib/element-refs';
 
 import CircularProgress from './circular-progress';
+import EndOfListView from './end-of-list-view';
 import ErrorView from './error-view';
 
 export interface ListProps<T> {
···
 				</Match>
 
 				<Match when={props.data}>
-					<div class="grid h-13 shrink-0 place-items-center">
-						<p class="text-sm text-contrast-muted">End of list</p>
-					</div>
+					<EndOfListView />
 				</Match>
 			</Switch>
 		</div>

src/components/paged-list.tsx

···
 import { ifIntersect } from '~/lib/element-refs';
 
 import CircularProgress from './circular-progress';
+import EndOfListView from './end-of-list-view';
 import ErrorView from './error-view';
 
 export interface PagedListProps<T> {
···
 				</Match>
 
 				<Match when={props.data}>
-					<div class="grid h-13 shrink-0 place-items-center">
-						<p class="text-sm text-contrast-muted">End of list</p>
-					</div>
+					<EndOfListView />
 				</Match>
 			</Switch>
 		</div>