Kumar Swapnil uzumaki-narut0

## SSR.cs
private string SSR(componentProps, progressiveComponentProps = null)
{
    componentProps.ProgressiveComponent  = RenderProgressiveComponents(progressiveComponentProps);
    var reactComponent = Environment.CreateComponent(componentName, componentProps, containerId, clientOnly);
}

private static string RenderProgressiveComponents(componentProps)
{
  IReactComponent reactComponent = Environment.CreateComponent("LazyCarousel", componentProps, "article-detail__carousel-wrapper");
  return reactComponent.RenderHtml();

## RenderProgressiveComponents.cs
private string SSR(componentProps, progressiveComponentProps = null)
{
    componentProps.ProgressiveComponent  = RenderProgressiveComponents(progressiveComponentProps);
    var reactComponent = Environment.CreateComponent(componentName, componentProps, containerId, clientOnly);
}

private static string RenderProgressiveComponents(componentProps)
{
  IReactComponent reactComponent = Environment.CreateComponent("LazyCarousel", componentProps, "article-detail__carousel-wrapper");
  return reactComponent.RenderHtml();

## Hydrator.js
import React from 'react'
import ReactDOM from 'react-dom'
import loadable from '@loadable/component';
import { InView } from "react-intersection-observer";

/**
 *
 * @description lazily loads the JS associated with a component and hydrates it based on its distance from viewport
 * @tutorial {@link https://youtu.be/k-A2VfuUROg?t=960} - Rendering on the Web: Performance Implications of Application Architecture
 * @tutorial {@link https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5} - Partial Hydration

## IdleUntilUrgent.js
import React from 'react';

/**
 * @description A Higher Order Component to bail out hydration phase,
                and renders when browser gets Idle time to execute it or the user interacts with it (whichever is first)
 * @param {*} WrappedComponent
 * @param {*} ComponentId
 * @see{https://philipwalton.com/articles/idle-until-urgent/} - Idle Until Urgent : Philip Walton
 */
export function idleUntilUrgent(WrappedComponent, ComponentId) {

## handshakeAndRequest.js
let handshakeAndRequest =
    dnsResolutionTime   // DNS lookup
    oneWayLatency +     // SYN
    oneWayLatency +     // SYN ACK
    oneWayLatency +     // ACK + initial request
    (this._ssl ? twoWayLatency : 0);
    // ClientHello/ServerHello assuming TLS False Start is enabled

## tcp-connection.js
/**
   * Simulates a network download of a particular number of bytes over an optional maximum amount of time
   * and returns information about the ending state.
   *
   * See https://hpbn.co/building-blocks-of-tcp/#three-way-handshake and
   *  https://hpbn.co/transport-layer-security-tls/#tls-handshake for details.
   *
   * @param {number} bytesToDownload
   * @param {DownloadOptions} [options]
   * @return {DownloadResults}

## Index.cshtml
<body>
    <div class="row">
        Hey there, How u doin'?
    </div>
</body>
</html>

## _HeadPart.cshtml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>Hey - My ASP.NET Application</title>
</head>

## HomeController.cs
public ActionResult Index()
{

  PartialView("/Views/Shared/_HeadPart.cshtml").ExecuteResult(ControllerContext);
  Response.Flush();
  Thread.Sleep(200);
  return PartialView("/Views/Home/Index.cshtml");
}

## prettier.config.js
module.exports = {
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 150,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
	private string SSR(componentProps, progressiveComponentProps = null)
	{
	componentProps.ProgressiveComponent = RenderProgressiveComponents(progressiveComponentProps);
	var reactComponent = Environment.CreateComponent(componentName, componentProps, containerId, clientOnly);
	}

	private static string RenderProgressiveComponents(componentProps)
	{
	IReactComponent reactComponent = Environment.CreateComponent("LazyCarousel", componentProps, "article-detail__carousel-wrapper");
	return reactComponent.RenderHtml();
	import React from 'react'
	import ReactDOM from 'react-dom'
	import loadable from '@loadable/component';
	import { InView } from "react-intersection-observer";

	/**
	*
	* @description lazily loads the JS associated with a component and hydrates it based on its distance from viewport
	* @tutorial {@link https://youtu.be/k-A2VfuUROg?t=960} - Rendering on the Web: Performance Implications of Application Architecture
	* @tutorial {@link https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5} - Partial Hydration
	import React from 'react';

	/**
	* @description A Higher Order Component to bail out hydration phase,
	and renders when browser gets Idle time to execute it or the user interacts with it (whichever is first)
	* @param {*} WrappedComponent
	* @param {*} ComponentId
	* @see{https://philipwalton.com/articles/idle-until-urgent/} - Idle Until Urgent : Philip Walton
	*/
	export function idleUntilUrgent(WrappedComponent, ComponentId) {
	let handshakeAndRequest =
	dnsResolutionTime // DNS lookup
	oneWayLatency + // SYN
	oneWayLatency + // SYN ACK
	oneWayLatency + // ACK + initial request
	(this._ssl ? twoWayLatency : 0);
	// ClientHello/ServerHello assuming TLS False Start is enabled
	/**
	* Simulates a network download of a particular number of bytes over an optional maximum amount of time
	* and returns information about the ending state.
	*
	* See https://hpbn.co/building-blocks-of-tcp/#three-way-handshake and
	* https://hpbn.co/transport-layer-security-tls/#tls-handshake for details.
	*
	* @param {number} bytesToDownload
	* @param {DownloadOptions} [options]
	* @return {DownloadResults}
	<body>
	<div class="row">
	Hey there, How u doin'?
	</div>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<title>Hey - My ASP.NET Application</title>
	</head>
	public ActionResult Index()
	{

	PartialView("/Views/Shared/_HeadPart.cshtml").ExecuteResult(ControllerContext);
	Response.Flush();
	Thread.Sleep(200);
	return PartialView("/Views/Home/Index.cshtml");
	}
	module.exports = {
	"arrowParens": "avoid",
	"bracketSpacing": true,
	"htmlWhitespaceSensitivity": "css",
	"insertPragma": false,
	"jsxBracketSameLine": false,
	"jsxSingleQuote": false,
	"printWidth": 150,
	"proseWrap": "preserve",
	"quoteProps": "as-needed",