Remove "scroll to top" button, it's causing page renders on every scroll

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-08-06 16:38:05 +02:00
parent 0c55b25919
commit b0c6aa48a4

View file

@ -6,7 +6,6 @@ import classes from "./App.module.css";
import PrometheusLogo from "./images/prometheus-logo.svg"; import PrometheusLogo from "./images/prometheus-logo.svg";
import { import {
Affix,
AppShell, AppShell,
Box, Box,
Burger, Burger,
@ -16,13 +15,11 @@ import {
Menu, Menu,
Skeleton, Skeleton,
Text, Text,
Transition,
createTheme, createTheme,
rem, rem,
} from "@mantine/core"; } from "@mantine/core";
import { useDisclosure, useWindowScroll } from "@mantine/hooks"; import { useDisclosure } from "@mantine/hooks";
import { import {
IconArrowUp,
IconBellFilled, IconBellFilled,
IconChevronDown, IconChevronDown,
IconChevronRight, IconChevronRight,
@ -180,7 +177,6 @@ const getPathPrefix = (path: string) => {
const navLinkXPadding = "md"; const navLinkXPadding = "md";
function App() { function App() {
const [scroll, scrollTo] = useWindowScroll();
const [opened, { toggle }] = useDisclosure(); const [opened, { toggle }] = useDisclosure();
const pathPrefix = getPathPrefix(window.location.pathname); const pathPrefix = getPathPrefix(window.location.pathname);
@ -422,23 +418,6 @@ function App() {
</Routes> </Routes>
</Suspense> </Suspense>
</ErrorBoundary> </ErrorBoundary>
<Affix position={{ bottom: 20, right: 20 }}>
<Transition transition="slide-up" mounted={scroll.y > 0}>
{(transitionStyles) => (
<Button
leftSection={
<IconArrowUp
style={{ width: rem(16), height: rem(16) }}
/>
}
style={transitionStyles}
onClick={() => scrollTo({ y: 0 })}
>
Scroll to top
</Button>
)}
</Transition>
</Affix>
</AppShell.Main> </AppShell.Main>
</AppShell> </AppShell>
{/* <ReactQueryDevtools initialIsOpen={false} /> */} {/* <ReactQueryDevtools initialIsOpen={false} /> */}