nav: slide

[rcrdlbl]

I chose react-spring for the animation library as there's two major actively developed NPM packages for spring-based animations, and the other one (framer-motion) requires react 18+

i was originally trying to be clever and use react-spring's useTransition() hook to respond to the route but decided it's better if the logic behind this is as simple as possible.

Improvements to implement

• Detecting if the page is being refreshed/first-loaded to avoid triggering the animation on page load
• Avoiding the flash of the GroupSidebar losing its group upon returning to all groups by preventing it from rerendering until the animation finishes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
chatstead	✅ Ready (Inspect)	Visit Preview	Sep 6, 2022 at 7:05PM (UTC)
homestead	✅ Ready (Inspect)	Visit Preview	Sep 6, 2022 at 7:05PM (UTC)
homestead-storybook	✅ Ready (Inspect)	Visit Preview	Sep 6, 2022 at 7:05PM (UTC)

[arthyn]

LGTM after initial run fix

[rcrdlbl]

alright – I realized that react-spring perhaps isn't the best library for this task, and i've switched to the latest version of framer-motion that supports react 17 – framer-motion's documentation is far better, the resulting code is easier to read, requires less massaging of app state into a library-friendly form, and the spring physics values it uses actually match up with the ones that figma exports.

@urcades these animations look better?

I've set the initial animation to not occur on mount, but when the nav's in single-group view, it does still have a slight animate-in when it loads.

I think this is because for some reason, when the main nav loads, the Nav component renders once, but when in single-group view, it mounts then re-renders, and due to it no longer being the first render, the animation triggers.

I'm not sure what exactly can be done to prevent this, if anyone has an idea let me know.

[jamesacklin]

Try this:

• derive a prop from useParams
• pass the prop to the nav element in the view
• trigger the hook based on that prop (shouldAnimate or something like that)

In classic PM style, I didn't read your code and you might have already attempted this. If the issue is with first load/mount based on route, that's where I would look first.

[rcrdlbl]

@arthyn okay so – with this commit, when in single-group view, upon refresh/URL navigation the sidebar simply doesn't load in lol

[rcrdlbl]

I think this logic is the problem –– i don't know what we're using the 'hidden' state for but it's not that, there's seperate navs for mobile that are already 'hidden'

[jamesacklin]

@rcrdlbl We used "hidden" in the mobile view - navigate into the group, the group nav should be shown; navigate into a channel, the group nav should be hidden but retrievable.

We're not showing mobile for the demo other than Pocket so feel free to TODO patch around this.

[rcrdlbl]

Alright, i've cut it up – it should be good now

[rcrdlbl]

@rcrdlbl We used "hidden" in the mobile view - navigate into the group, the group nav should be shown; navigate into a channel, the group nav should be hidden but retrievable.

We're not showing mobile for the demo other than Pocket so feel free to TODO patch around this.

It seems like if i remove the "hidden" logic from the nav stuff it still works this way? You return to the nav by clicking the little back button next to the group name that shows up in the mobile view, correct?

[jamesacklin]

clicking the little back button next to the group name that shows up in the mobile view

I did this to force a route change to get around this problem, yes.

[arthyn]

Suggested change

	const flag = useRouteGroup();
	const inChannel = useMatch('/groups/:ship/:name/channels*');
	const firstRender = useIsFirstRender();
	const animationConfig = {
	type: 'spring',
	stiffness: 2880,
	damping: 120,
	};
	useEffect(() => {
	if (!firstRender) {
	return;
	}
	if (isChat) {
	useNavStore.getState().navigatePrimary('dm');
	} else if (flag) {
	useNavStore.getState().navigatePrimary('group', flag);
	} else {
	useNavStore.getState().navigatePrimary('main');
	}
	}, [flag, firstRender, isMobile, isChat, inChannel]);
	const flag = useRouteGroup();
	const inChannel = useMatch('/groups/:ship/:name/channels*');
	const animationConfig = {
	type: 'spring',
	stiffness: 2880,
	damping: 120,
	};
	useEffect(() => {
	if (isChat) {
	useNavStore.getState().navigatePrimary('dm');
	} else if (flag && isMobile && inChannel) {
	useNavStore.getState().navigatePrimary('hidden');
	} else if (flag) {
	useNavStore.getState().navigatePrimary('group', flag);
	} else {
	useNavStore.getState().navigatePrimary('main');
	}
	}, [flag, isMobile, isChat, inChannel]);

[arthyn]

went back and took a second look at the logic. we still need the hidden behavior if you enter a page in a channel. this also corrects the bad logic from earlier

[rcrdlbl]

Just pushed a change that actually seems to get 'hidden' set properly on mobile

[arthyn]

LGTM!

Handled