mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-29 00:20:04 +01:00
desktop: stop unnecessary animations
This commit is contained in:
Abdullah Atta
committed by
Abdullah Atta
Abdullah Atta
parent
a971a29ff2
commit
5e7e91caf0
@@ -95,7 +95,11 @@ function SuspenseLoader({ condition, props, component: Component, fallback }) {
|
||||
if (!condition) return fallback;
|
||||
|
||||
return (
|
||||
<Suspense fallback={fallback}>
|
||||
<Suspense
|
||||
fallback={
|
||||
import.meta.env.REACT_APP_PLATFORM === "desktop" ? null : fallback
|
||||
}
|
||||
>
|
||||
<Component {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
@@ -185,6 +185,7 @@ function TipTap(props: TipTapProps) {
|
||||
autofocus: "start",
|
||||
onFocus,
|
||||
onCreate: ({ editor }) => {
|
||||
if (onLoad) onLoad();
|
||||
if (oldNonce.current !== nonce)
|
||||
editor.commands.focus("start", { scrollIntoView: true });
|
||||
oldNonce.current = nonce;
|
||||
@@ -201,7 +202,6 @@ function TipTap(props: TipTapProps) {
|
||||
}
|
||||
}
|
||||
});
|
||||
if (onLoad) onLoad();
|
||||
editor.commands.refreshSearch();
|
||||
},
|
||||
onUpdate: ({ editor, transaction }) => {
|
||||
|
||||
@@ -36,8 +36,6 @@ import Announcements from "../announcements";
|
||||
import { ListLoader } from "../loaders/list-loader";
|
||||
import ScrollContainer from "../scroll-container";
|
||||
import { useKeyboardListNavigation } from "../../hooks/use-keyboard-list-navigation";
|
||||
import { AnimatedFlex } from "../animated";
|
||||
import { domAnimation, LazyMotion } from "framer-motion";
|
||||
|
||||
export const CustomScrollbarsVirtualList = forwardRef<
|
||||
HTMLDivElement,
|
||||
@@ -128,149 +126,132 @@ function ListContainer(props: ListContainerProps) {
|
||||
const Component = ListProfiles[type];
|
||||
|
||||
return (
|
||||
<LazyMotion features={domAnimation} strict>
|
||||
<Flex variant="columnFill">
|
||||
{!props.items.length && props.placeholder ? (
|
||||
<>
|
||||
{header}
|
||||
{props.isLoading ? (
|
||||
<ListLoader />
|
||||
) : (
|
||||
<Flex variant="columnCenterFill" data-test-id="list-placeholder">
|
||||
{props.placeholder}
|
||||
</Flex>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AnimatedFlex
|
||||
initial={{
|
||||
opacity: 0,
|
||||
scale: 0.98
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
scale: 1
|
||||
}}
|
||||
transition={{ duration: 0.2, delay: 0.1, ease: "easeInOut" }}
|
||||
ref={listContainerRef}
|
||||
variant="columnFill"
|
||||
data-test-id={`${type}-list`}
|
||||
>
|
||||
<Virtuoso
|
||||
ref={listRef}
|
||||
data={items}
|
||||
computeItemKey={(index) =>
|
||||
items[index].id || items[index].title
|
||||
}
|
||||
defaultItemHeight={DEFAULT_ITEM_HEIGHT}
|
||||
totalCount={items.length}
|
||||
onBlur={() => setFocusedGroupIndex(-1)}
|
||||
onKeyDown={(e) => onKeyDown(e.nativeEvent)}
|
||||
components={{
|
||||
Scroller: CustomScrollbarsVirtualList,
|
||||
Item: (props) => (
|
||||
<div
|
||||
{...props}
|
||||
style={{ paddingBottom: 1 }}
|
||||
onFocus={() => onFocus(props["data-item-index"])}
|
||||
onMouseDown={(e) =>
|
||||
onMouseDown(e.nativeEvent, props["data-item-index"])
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
),
|
||||
Header: () => (header ? header : <Announcements />)
|
||||
}}
|
||||
itemContent={(index, item) => {
|
||||
if (!item) return null;
|
||||
|
||||
switch (item.type) {
|
||||
case "header":
|
||||
if (!groupType) return null;
|
||||
return (
|
||||
<GroupHeader
|
||||
type={groupType}
|
||||
refresh={refresh}
|
||||
title={item.title}
|
||||
isFocused={index === focusedGroupIndex}
|
||||
index={index}
|
||||
onSelectGroup={() => {
|
||||
let endIndex;
|
||||
for (
|
||||
let i = index + 1;
|
||||
i < props.items.length;
|
||||
++i
|
||||
) {
|
||||
if (props.items[i].type === "header") {
|
||||
endIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
setSelectedItems([
|
||||
...selectionStore.get().selectedItems,
|
||||
...props.items.slice(
|
||||
index,
|
||||
endIndex || props.items.length
|
||||
)
|
||||
]);
|
||||
}}
|
||||
groups={groups}
|
||||
onJump={(title: string) => {
|
||||
const index = props.items.findIndex(
|
||||
(v) => v.title === title
|
||||
);
|
||||
if (index < 0) return;
|
||||
listRef.current?.scrollToIndex({
|
||||
index,
|
||||
align: "center",
|
||||
behavior: "auto"
|
||||
});
|
||||
setFocusedGroupIndex(index);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Component
|
||||
item={item}
|
||||
context={context}
|
||||
index={index}
|
||||
type={type}
|
||||
compact={compact}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</AnimatedFlex>
|
||||
</>
|
||||
)}
|
||||
{button && (
|
||||
<Button
|
||||
variant="primary"
|
||||
data-test-id={`${props.type}-action-button`}
|
||||
onClick={button.onClick}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
display: ["block", "block", "none"],
|
||||
alignSelf: "end",
|
||||
borderRadius: 100,
|
||||
p: 0,
|
||||
m: 0,
|
||||
mb: 2,
|
||||
mr: 2,
|
||||
width: 45,
|
||||
height: 45
|
||||
}}
|
||||
<Flex variant="columnFill">
|
||||
{!props.items.length && props.placeholder ? (
|
||||
<>
|
||||
{header}
|
||||
{props.isLoading ? (
|
||||
<ListLoader />
|
||||
) : (
|
||||
<Flex variant="columnCenterFill" data-test-id="list-placeholder">
|
||||
{props.placeholder}
|
||||
</Flex>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Flex
|
||||
ref={listContainerRef}
|
||||
variant="columnFill"
|
||||
data-test-id={`${type}-list`}
|
||||
>
|
||||
<Plus color="static" />
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
</LazyMotion>
|
||||
<Virtuoso
|
||||
ref={listRef}
|
||||
data={items}
|
||||
computeItemKey={(index) => items[index].id || items[index].title}
|
||||
defaultItemHeight={DEFAULT_ITEM_HEIGHT}
|
||||
totalCount={items.length}
|
||||
onBlur={() => setFocusedGroupIndex(-1)}
|
||||
onKeyDown={(e) => onKeyDown(e.nativeEvent)}
|
||||
components={{
|
||||
Scroller: CustomScrollbarsVirtualList,
|
||||
Item: (props) => (
|
||||
<div
|
||||
{...props}
|
||||
style={{ paddingBottom: 1 }}
|
||||
onFocus={() => onFocus(props["data-item-index"])}
|
||||
onMouseDown={(e) =>
|
||||
onMouseDown(e.nativeEvent, props["data-item-index"])
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
),
|
||||
Header: () => (header ? header : <Announcements />)
|
||||
}}
|
||||
itemContent={(index, item) => {
|
||||
if (!item) return null;
|
||||
|
||||
switch (item.type) {
|
||||
case "header":
|
||||
if (!groupType) return null;
|
||||
return (
|
||||
<GroupHeader
|
||||
type={groupType}
|
||||
refresh={refresh}
|
||||
title={item.title}
|
||||
isFocused={index === focusedGroupIndex}
|
||||
index={index}
|
||||
onSelectGroup={() => {
|
||||
let endIndex;
|
||||
for (let i = index + 1; i < props.items.length; ++i) {
|
||||
if (props.items[i].type === "header") {
|
||||
endIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
setSelectedItems([
|
||||
...selectionStore.get().selectedItems,
|
||||
...props.items.slice(
|
||||
index,
|
||||
endIndex || props.items.length
|
||||
)
|
||||
]);
|
||||
}}
|
||||
groups={groups}
|
||||
onJump={(title: string) => {
|
||||
const index = props.items.findIndex(
|
||||
(v) => v.title === title
|
||||
);
|
||||
if (index < 0) return;
|
||||
listRef.current?.scrollToIndex({
|
||||
index,
|
||||
align: "center",
|
||||
behavior: "auto"
|
||||
});
|
||||
setFocusedGroupIndex(index);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Component
|
||||
item={item}
|
||||
context={context}
|
||||
index={index}
|
||||
type={type}
|
||||
compact={compact}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
{button && (
|
||||
<Button
|
||||
variant="primary"
|
||||
data-test-id={`${props.type}-action-button`}
|
||||
onClick={button.onClick}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
display: ["block", "block", "none"],
|
||||
alignSelf: "end",
|
||||
borderRadius: 100,
|
||||
p: 0,
|
||||
m: 0,
|
||||
mb: 2,
|
||||
mr: 2,
|
||||
width: 45,
|
||||
height: 45
|
||||
}}
|
||||
>
|
||||
<Plus color="static" />
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
export default ListContainer;
|
||||
|
||||
@@ -48,6 +48,7 @@ import { useStore as useUserStore } from "../../stores/user-store";
|
||||
import { useStore as useThemeStore } from "../../stores/theme-store";
|
||||
import useLocation from "../../hooks/use-location";
|
||||
import { FlexScrollContainer } from "../scroll-container";
|
||||
import { isDesktop } from "../../utils/platform";
|
||||
|
||||
type Route = {
|
||||
title: string;
|
||||
@@ -191,7 +192,7 @@ function NavigationMenu(props: NavigationMenuProps) {
|
||||
))}
|
||||
{colors.map((color, index) => (
|
||||
<NavigationItem
|
||||
animate
|
||||
animate={!isDesktop()}
|
||||
index={index}
|
||||
isTablet={isTablet}
|
||||
key={color.id}
|
||||
@@ -220,7 +221,7 @@ function NavigationMenu(props: NavigationMenuProps) {
|
||||
/>
|
||||
{shortcuts.map((item, index) => (
|
||||
<NavigationItem
|
||||
animate
|
||||
animate={!isDesktop()}
|
||||
index={colors.length - 1 + index}
|
||||
isTablet={isTablet}
|
||||
key={item.id}
|
||||
|
||||
Reference in New Issue
Block a user