[skeleton] variant=text wrong size

[Mangatt]

I suppose that text skeleton should be 1:1 size to real text that he is replacing. Right now, size is way off.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Size of text skeleton is wrong.

Expected Behavior 🤔

Size of text skeleton should be equal to size of replaced text.

Steps to Reproduce 🕹

https://codesandbox.io/s/create-react-app-7y24f

To work as expected, there has to be 2 changes:

1. Add   as skeleton children
2. Change component CSS to:

height: 'auto',
marginTop: 0,
marginBottom: 0,
transformOrigin: '0 65%',
transform: 'translateZ(0) scale(1, 0.65)',
textIndent: -999,
borderRadius: theme.shape.borderRadius,

[Mangatt]

Alternatively,   could be added in pseudoelement:

text: {
	height: 'auto',
	marginTop: 0,
	marginBottom: 0,
	transformOrigin: '0 65%',
	transform: 'translateZ(0) scale(1, 0.65)',
	textIndent: -999,
	'&:empty:before': {
		content: '" "'
	}
}

[oliviertassinari]

I suppose that text skeleton should be 1:1 size to real text that he is replacing.

@Mangatt Why should it follow this rule? The component was designed to be a rough approximation of the content.

[Mangatt]

@oliviertassinari You don't agree? Different size results in percieved jumps after content is loaded. What are benefits of different size really?

[oliviertassinari]

@Mangatt I had a closer look, actually, it looks pretty slick. I would be curious to try it out with our implementation :).

[Mangatt]

@oliviertassinari I'm glad that you like it. I think that as well :)

[oliviertassinari]

@Mangatt Alright, do you want to submit a pull request 💪?

[Mangatt]

@oliviertassinari I'll try to in next week 👍

[oliviertassinari]

@Mangatt Did you had the chance to work on it? :)

[julie-volkova]

But what about other examples of usage? For example, if user provides disabledTypography prop. That way a rendered skeleton would shrink even harder compared to text content.
Demo here.

[Mangatt]

@oliviertassinari Sorry, I did not, but it is definitely on my schedule.
@macfire10 Yes, in your demo is size off, but right now size is always off, so there's no harm in adjusting styles. There is no sure-proof CSS solution of this problem, so everyone has to adjust CSS according to their needs if necessary.

[oliviertassinari]

@macfire10 the <p> elements add its own margin. If you replace it with a <div>, we would still be good with disabledTypography set to true. @Mangatt's proposal seems to be solid. Given he has other priorities right now, would you be interested in contributing his idea? :)

[julie-volkova]

@oliviertassinari sure!