feat(kit): Skeleton add new directive

[waterplea]

Closes #

[lumberjack-bot]

Pull request was closed ✔️

All saved screenshots (for current PR) were deleted 🗑️

[github-actions]

Visit the preview URL for this PR (updated for commit 7dd0e3d):

https://taiga-ui--pr6934-skeleton-c6qeypzv.web.app

_{(expires Tue, 19 Mar 2024 12:18:07 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 4b5ece1e114386f6a105425ef799091475b249eb}

[bundlemon]

BundleMon

Files updated (2)

Status	Path	Size	Limits
✅	demo/browser/main.(hash).js	319.19KB (+592B +0.18%)	+10%
✅	demo/browser/runtime.(hash).js	36.53KB (+17B +0.05%)	+10%

Unchanged files (3)

Status	Path	Size	Limits
✅	demo/browser/vendor.(hash).js	210.51KB	+10%
✅	demo/browser/styles.(hash).css	13.78KB	+10%
✅	demo/browser/polyfills.(hash).js	11.21KB	+10%

Total files change +609B +0.1%

Groups updated (1)

Status	Path	Size	Limits
✅	demo/browser/*..js	2.2MB (-2.27KB -0.1%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[nsbarsukov]

Is this additional nesting is really required ?

Could we simplify example ?

Suggested change

	<p>
	<span
	[tuiSkeleton]="
	skeleton
	? 'This text serves as the content behind the skeleton and depending on its length, the skeleton will adjust to fit it.'
	: ''
	"
	>
	{{ skeleton ? '' : 'This text will be replaced by a placeholder.' }}
	</span>
	</p>
	<p
	[tuiSkeleton]="
	skeleton
	? 'This text serves as the content behind the skeleton and depending on its length, the skeleton will adjust to fit it.'
	: ''
	"
	>
	{{ skeleton ? '' : 'This text will be replaced by a placeholder.' }}
	</p>

[waterplea]

It is there so the background is only where the text is — span is inline.

[nsbarsukov]

🚀