10007511759

Committed 19 Jul 2024 11:46AM UTC coverage: 31.856% (-0.007%) from 31.863%

Build # 10007511759

Build Type

Pull #9502

github

Committed by

Will-Howard

Commit Message

add comment about useMemo

Pull Request Pull Request #9502: Replace react-no-ssr with DeferRender, to support deferring rendering on the client side

Run Details

4903 of 40256 branches covered (12.18%)

Branch coverage included in aggregate %.

33 of 67 new or added lines in 28 files covered. (49.25%)

1 existing line in 1 file now uncovered.

28603 of 64925 relevant lines covered (44.06%)

180.3 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

37.93

/packages/lesswrong/components/quickTakes/QuickTakesListItem.tsx

import React, { useCallback, useState } from "react";
import { registerComponent, Components } from "../../lib/vulcan-lib";
import { useTracking } from "../../lib/analyticsEvents";
import { isFriendlyUI } from "../../themes/forumTheme";
import { isLWorAF } from "../../lib/instanceSettings";
import classNames from "classnames";
import DeferRender from "../common/DeferRender";

const styles = (_theme: ThemeType) => ({
  expandedRoot: {
    position: "relative",
    "& .comments-node-root": {
      marginBottom: 8,
      ...(isLWorAF ? {
        paddingTop: 0,
        // This is to cause the "scroll to parent" sidebar to be positioned with respect to the top-level comment node, rather than the entire section
        position: 'relative',
      } : {}),

    },
  },
  hidden: {
    display: 'none',
  },
});

const QuickTakesListItem = ({quickTake, classes}: {
  quickTake: ShortformComments,
  classes: ClassesType,
}) => {
  const {captureEvent} = useTracking();
  const [expanded, setExpanded] = useState(false);
  const wrappedSetExpanded = useCallback((value: boolean) => {
    setExpanded(value);
    captureEvent(value ? "shortformItemExpanded" : "shortformItemCollapsed");
  }, [captureEvent, setExpanded]);

  const {CommentsNode, QuickTakesCollapsedListItem, LWQuickTakesCollapsedListItem} = Components;

  const CollapsedListItem = isFriendlyUI ? QuickTakesCollapsedListItem : LWQuickTakesCollapsedListItem;

  // We're doing both a NoSSR + conditional `display: 'none'` to toggle between the collapsed & expanded quick take
  // This is to eliminate a loading spinner (for the child comments) when someone expands a quick take,
  // while avoiding the impact to the home page SSR speed for the large % of users who won't interact with quick takes at all
  const expandedComment = (
    <DeferRender ssr={false}>
      <div className={classNames(classes.expandedRoot, { [classes.hidden]: !expanded })}>
        <CommentsNode
          treeOptions={{
            post: quickTake.post ?? undefined,
            showCollapseButtons: isFriendlyUI,
            onToggleCollapsed: () => wrappedSetExpanded(!expanded),
          }}
          comment={quickTake}
          loadChildrenSeparately
          forceUnTruncated
          forceUnCollapsed
        />
      </div>
    </DeferRender>
  );

  const collapsedComment = (
    <div className={classNames({ [classes.hidden]: expanded })}>
      <CollapsedListItem quickTake={quickTake} setExpanded={wrappedSetExpanded} />
    </div>
  );

  return <>
    {expandedComment}
    {collapsedComment}
  </>;
}

const QuickTakesListItemComponent = registerComponent(
  "QuickTakesListItem",
  QuickTakesListItem,
  {styles},
);

declare global {
  interface ComponentTypes {
    QuickTakesListItem: typeof QuickTakesListItemComponent
  }
}

1	import React, { useCallback, useState } from "react";	1✔
2	import { registerComponent, Components } from "../../lib/vulcan-lib";	1✔
3	import { useTracking } from "../../lib/analyticsEvents";	1✔
4	import { isFriendlyUI } from "../../themes/forumTheme";	1✔
5	import { isLWorAF } from "../../lib/instanceSettings";	1✔
6	import classNames from "classnames";	1✔
7	import DeferRender from "../common/DeferRender";	1✔
8
9	const styles = (_theme: ThemeType) => ({	1✔
10	expandedRoot: {
11	position: "relative",
12	"& .comments-node-root": {
13	marginBottom: 8,
14	...(isLWorAF ? {	1!
15	paddingTop: 0,
16	// This is to cause the "scroll to parent" sidebar to be positioned with respect to the top-level comment node, rather than the entire section
17	position: 'relative',
18	} : {}),
19
20	},
21	},
22	hidden: {
23	display: 'none',
24	},
25	});
26
27	const QuickTakesListItem = ({quickTake, classes}: {	1✔
28	quickTake: ShortformComments,
29	classes: ClassesType,
30	}) => {
31	const {captureEvent} = useTracking();	×
32	const [expanded, setExpanded] = useState(false);	×
33	const wrappedSetExpanded = useCallback((value: boolean) => {	×
34	setExpanded(value);	×
35	captureEvent(value ? "shortformItemExpanded" : "shortformItemCollapsed");	×
36	}, [captureEvent, setExpanded]);
37
38	const {CommentsNode, QuickTakesCollapsedListItem, LWQuickTakesCollapsedListItem} = Components;	×
39
40	const CollapsedListItem = isFriendlyUI ? QuickTakesCollapsedListItem : LWQuickTakesCollapsedListItem;	×
41
42	// We're doing both a NoSSR + conditional `display: 'none'` to toggle between the collapsed & expanded quick take
43	// This is to eliminate a loading spinner (for the child comments) when someone expands a quick take,
44	// while avoiding the impact to the home page SSR speed for the large % of users who won't interact with quick takes at all
45	const expandedComment = (
NEW 46	<DeferRender ssr={false}>	×
47	<div className={classNames(classes.expandedRoot, { [classes.hidden]: !expanded })}>
48	<CommentsNode
49	treeOptions={{
50	post: quickTake.post ?? undefined,	×
51	showCollapseButtons: isFriendlyUI,
52	onToggleCollapsed: () => wrappedSetExpanded(!expanded),	×
53	}}
54	comment={quickTake}
55	loadChildrenSeparately
56	forceUnTruncated
57	forceUnCollapsed
58	/>
59	</div>
60	</DeferRender>
61	);
62
63	const collapsedComment = (
64	<div className={classNames({ [classes.hidden]: expanded })}>	×
65	<CollapsedListItem quickTake={quickTake} setExpanded={wrappedSetExpanded} />
66	</div>
67	);
68
69	return <>	×
70	{expandedComment}
71	{collapsedComment}
72	</>;
73	}
74
75	const QuickTakesListItemComponent = registerComponent(	1✔
76	"QuickTakesListItem",
77	QuickTakesListItem,
78	{styles},
79	);
80
81	declare global {
82	interface ComponentTypes {
83	QuickTakesListItem: typeof QuickTakesListItemComponent
84	}
85	}

ForumMagnum / ForumMagnum / 10007511759

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous