8692005428

Committed 15 Apr 2024 03:37PM UTC coverage: 31.991% (+0.004%) from 31.987%

Build # 8692005428

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9091 from ForumMagnum/friendly-posts-item-ghost

[FriendlyUI only] add posts item ghost loading state

Run Details

4645 of 37811 branches covered (12.28%)

Branch coverage included in aggregate %.

10 of 18 new or added lines in 5 files covered. (55.56%)

1 existing line in 1 file now uncovered.

27057 of 61286 relevant lines covered (44.15%)

182.83 hits per line

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

85.71

/packages/lesswrong/components/posts/FriendlyPlaceholderPostsItem.tsx

import classNames from 'classnames';
import React from 'react';
import { registerComponent } from "../../lib/vulcan-lib";

const styles = (theme: ThemeType) => ({
  root: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    columnGap: 18,
    minWidth: "100%",
    maxWidth: "100%",
    background: theme.palette.grey[0],
    padding: '15px 17px',
    border: `1px solid ${theme.palette.grey[100]}`,
    borderRadius: theme.borderRadius.default,
    [theme.breakpoints.down("xs")]: {
      padding: '14px 17px 12px',
    },
  },
  placeholder: {
    height: 10,
    background: theme.palette.panelBackground.placeholderGradient,
    backgroundSize: "300% 100%",
    animation: "profile-image-loader 1.8s infinite",
    borderRadius: 3,
  },
  karma: {
    flex: 'none',
    width: 16,
  },
  titleCol: {
    flexGrow: 1,
  },
  title: {
    width: '100%',
    maxWidth: 434,
    marginBottom: 10,
  },
  metaRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    columnGap: 18,
  },
  authorWrapper: {
    flexGrow: 1,
  },
  author: {
    width: '100%',
    maxWidth: 183,
  },
  commentIcon: {
    flex: 'none',
    width: 33,
    marginRight: 4,
  },
  commentIconMobile: {
    [theme.breakpoints.up("sm")]: {
      display: "none",
    },
  },
  threeDotsIcon: {
    flex: 'none',
    height: 15,
    width: 10,
  },
  threeDotsIconMobile: {
    [theme.breakpoints.up("sm")]: {
      display: "none",
    },
  },
  hideOnMobile: {
    [theme.breakpoints.down("xs")]: {
      display: "none",
    },
  },
})

const FriendlyPlaceholderPostsItem = ({classes}: {
  classes: ClassesType,
}) => {
  return <div className={classes.root}>
    <div className={classNames(classes.placeholder, classes.karma)}></div>
    <div className={classes.titleCol}>
      <div className={classNames(classes.placeholder, classes.title)}></div>
      <div className={classes.metaRow}>
        <div className={classes.authorWrapper}>
          <div className={classNames(classes.placeholder, classes.author)}></div>
        </div>
        <div className={classNames(classes.placeholder, classes.commentIcon, classes.commentIconMobile)}></div>
        <div className={classNames(classes.placeholder, classes.threeDotsIcon, classes.threeDotsIconMobile)}></div>
      </div>
    </div>
    <div className={classNames(classes.placeholder, classes.commentIcon, classes.hideOnMobile)}></div>
    <div className={classNames(classes.placeholder, classes.threeDotsIcon, classes.hideOnMobile)}></div>
  </div>
}

const FriendlyPlaceholderPostsItemComponent = registerComponent('FriendlyPlaceholderPostsItem', FriendlyPlaceholderPostsItem, {styles});

declare global {
  interface ComponentTypes {
    FriendlyPlaceholderPostsItem: typeof FriendlyPlaceholderPostsItemComponent
  }
}

1	import classNames from 'classnames';	1✔
2	import React from 'react';	1✔
3	import { registerComponent } from "../../lib/vulcan-lib";	1✔
4
5	const styles = (theme: ThemeType) => ({	1✔
6	root: {
7	display: 'flex',
8	justifyContent: 'space-between',
9	alignItems: 'center',
10	columnGap: 18,
11	minWidth: "100%",
12	maxWidth: "100%",
13	background: theme.palette.grey[0],
14	padding: '15px 17px',
15	border: `1px solid ${theme.palette.grey[100]}`,
16	borderRadius: theme.borderRadius.default,
17	[theme.breakpoints.down("xs")]: {
18	padding: '14px 17px 12px',
19	},
20	},
21	placeholder: {
22	height: 10,
23	background: theme.palette.panelBackground.placeholderGradient,
24	backgroundSize: "300% 100%",
25	animation: "profile-image-loader 1.8s infinite",
26	borderRadius: 3,
27	},
28	karma: {
29	flex: 'none',
30	width: 16,
31	},
32	titleCol: {
33	flexGrow: 1,
34	},
35	title: {
36	width: '100%',
37	maxWidth: 434,
38	marginBottom: 10,
39	},
40	metaRow: {
41	display: 'flex',
42	justifyContent: 'space-between',
43	alignItems: 'center',
44	columnGap: 18,
45	},
46	authorWrapper: {
47	flexGrow: 1,
48	},
49	author: {
50	width: '100%',
51	maxWidth: 183,
52	},
53	commentIcon: {
54	flex: 'none',
55	width: 33,
56	marginRight: 4,
57	},
58	commentIconMobile: {
59	[theme.breakpoints.up("sm")]: {
60	display: "none",
61	},
62	},
63	threeDotsIcon: {
64	flex: 'none',
65	height: 15,
66	width: 10,
67	},
68	threeDotsIconMobile: {
69	[theme.breakpoints.up("sm")]: {
70	display: "none",
71	},
72	},
73	hideOnMobile: {
74	[theme.breakpoints.down("xs")]: {
75	display: "none",
76	},
77	},
78	})
79
80	const FriendlyPlaceholderPostsItem = ({classes}: {	1✔
81	classes: ClassesType,
82	}) => {
NEW 83	return <div className={classes.root}>	×
84	<div className={classNames(classes.placeholder, classes.karma)}></div>
85	<div className={classes.titleCol}>
86	<div className={classNames(classes.placeholder, classes.title)}></div>
87	<div className={classes.metaRow}>
88	<div className={classes.authorWrapper}>
89	<div className={classNames(classes.placeholder, classes.author)}></div>
90	</div>
91	<div className={classNames(classes.placeholder, classes.commentIcon, classes.commentIconMobile)}></div>
92	<div className={classNames(classes.placeholder, classes.threeDotsIcon, classes.threeDotsIconMobile)}></div>
93	</div>
94	</div>
95	<div className={classNames(classes.placeholder, classes.commentIcon, classes.hideOnMobile)}></div>
96	<div className={classNames(classes.placeholder, classes.threeDotsIcon, classes.hideOnMobile)}></div>
97	</div>
98	}
99
100	const FriendlyPlaceholderPostsItemComponent = registerComponent('FriendlyPlaceholderPostsItem', FriendlyPlaceholderPostsItem, {styles});	1✔
101
102	declare global {
103	interface ComponentTypes {
104	FriendlyPlaceholderPostsItem: typeof FriendlyPlaceholderPostsItemComponent
105	}
106	}

ForumMagnum / ForumMagnum / 8692005428

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