Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
bc8e77be9a
PromucFlow_constructor/app/client/cypress/fixtures/lazyRender.json
balajisoundar bacb77a352
chore: Render below the fold widget components when browser is idle using Intersection Observer (#18747) 
## Description
In order to improve the first load of the applications, now we're only
rendering the widget components that are [above the
fold](https://en.wikipedia.org/wiki/Above_the_fold#In_web_design) right
away and rendering the other widget components whenever the browser is
idle. This decreases the amount of time it takes before the first paint
on the screen.

This is getting shipped behind a feature flag!
2023-02-08 16:53:39 +05:30

1 line
16 KiB
JSON
Raw Blame History

{"dsl":{"widgetName":"MainContainer","backgroundColor":"none","rightColumn":4896,"snapColumns":64,"detachFromLayout":true,"widgetId":"0","topRow":0,"bottomRow":1810,"containerStyle":"none","snapRows":125,"parentRowSpace":1,"type":"CANVAS_WIDGET","canExtend":true,"version":71,"minHeight":1292,"dynamicTriggerPathList":[],"parentColumnSpace":1,"dynamicBindingPathList":[],"leftColumn":0,"children":[{"isVisible":true,"label":"Label","labelPosition":"Top","labelAlignment":"left","labelTextSize":"0.875rem","labelWidth":5,"widgetName":"PhoneInput1","version":1,"defaultText":"","iconAlign":"left","autoFocus":false,"labelStyle":"","resetOnSubmit":true,"isRequired":false,"isDisabled":false,"animateLoading":true,"defaultDialCode":"+1","allowDialCodeChange":false,"allowFormatting":true,"minDynamicHeight":4,"maxDynamicHeight":9000,"dynamicHeight":"FIXED","searchTags":["call"],"type":"PHONE_INPUT_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Phone Input","key":"ljiw4y9d0k","iconSVG":"/static/media/icon.108789d7165de30306435ab3c24e6cad.svg","widgetId":"75v1xxqwnk","renderMode":"CANVAS","accentColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none","isLoading":false,"parentColumnSpace":20.0625,"parentRowSpace":10,"leftColumn":20,"rightColumn":40,"topRow":6,"bottomRow":13,"parentId":"0","dynamicBindingPathList":[{"key":"accentColor"},{"key":"borderRadius"}]},{"isVisible":true,"animateLoading":true,"defaultSelectedRowIndex":0,"defaultSelectedRowIndices":[0],"label":"Data","widgetName":"Table2","searchKey":"","textSize":"0.875rem","horizontalAlignment":"LEFT","verticalAlignment":"CENTER","totalRecordsCount":0,"defaultPageSize":0,"dynamicPropertyPathList":[],"borderColor":"#E0DEDE","borderWidth":"1","dynamicBindingPathList":[{"key":"primaryColumns.step.computedValue"},{"key":"primaryColumns.task.computedValue"},{"key":"primaryColumns.status.computedValue"},{"key":"primaryColumns.action.computedValue"},{"key":"primaryColumns.action.buttonColor"},{"key":"primaryColumns.action.borderRadius"},{"key":"primaryColumns.action.boxShadow"},{"key":"accentColor"},{"key":"borderRadius"},{"key":"boxShadow"}],"primaryColumns":{"step":{"index":0,"width":150,"id":"step","originalId":"step","alias":"step","horizontalAlignment":"LEFT","verticalAlignment":"CENTER","columnType":"text","textSize":"0.875rem","enableFilter":true,"enableSort":true,"isVisible":true,"isCellVisible":true,"isCellEditable":false,"isDerived":false,"label":"step","computedValue":"{{Table2.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"step\"]))}}","validation":{},"labelColor":"#FFFFFF"},"task":{"index":1,"width":150,"id":"task","originalId":"task","alias":"task","horizontalAlignment":"LEFT","verticalAlignment":"CENTER","columnType":"text","textSize":"0.875rem","enableFilter":true,"enableSort":true,"isVisible":true,"isCellVisible":true,"isCellEditable":false,"isDerived":false,"label":"task","computedValue":"{{Table2.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"task\"]))}}","validation":{},"labelColor":"#FFFFFF"},"status":{"index":2,"width":150,"id":"status","originalId":"status","alias":"status","horizontalAlignment":"LEFT","verticalAlignment":"CENTER","columnType":"text","textSize":"0.875rem","enableFilter":true,"enableSort":true,"isVisible":true,"isCellVisible":true,"isCellEditable":false,"isDerived":false,"label":"status","computedValue":"{{Table2.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"status\"]))}}","validation":{},"labelColor":"#FFFFFF"},"action":{"index":3,"width":150,"id":"action","originalId":"action","alias":"action","horizontalAlignment":"LEFT","verticalAlignment":"CENTER","columnType":"button","textSize":"0.875rem","enableFilter":true,"enableSort":true,"isVisible":true,"isCellVisible":true,"isCellEditable":false,"isDisabled":false,"isDerived":false,"label":"action","onClick":"{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}","computedValue":"{{Table2.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"action\"]))}}","validation":{},"labelColor":"#FFFFFF","buttonColor":"{{Table2.processedTableData.map((currentRow, currentIndex) => ( appsmith.theme.colors.primaryColor))}}","borderRadius":"{{Table2.processedTableData.map((currentRow, currentIndex) => ( appsmith.theme.borderRadius.appBorderRadius))}}","boxShadow":"{{Table2.processedTableData.map((currentRow, currentIndex) => ( 'none'))}}"}},"tableData":"[\n {\n \"step\": \"#11\",\n \"task\": \"Drop a table\",\n \"status\": \"✅\",\n \"action\": \"\"\n },\n {\n \"step\": \"#2\",\n \"task\": \"Create a query fetch_users with the Mock DB\",\n \"status\": \"--\",\n \"action\": \"\"\n },\n {\n \"step\": \"#3\",\n \"task\": \"Bind the query using => fetch_users.data\",\n \"status\": \"--\",\n \"action\": \"\"\n }\n]","columnWidthMap":{"task":245,"step":62,"status":75},"columnOrder":["step","task","status","action"],"enableClientSideSearch":true,"isVisibleSearch":true,"isVisibleFilters":true,"isVisibleDownload":true,"isVisiblePagination":true,"isSortable":true,"delimiter":",","version":1,"inlineEditingSaveOption":"ROW_LEVEL","type":"TABLE_WIDGET_V2","hideCard":false,"isDeprecated":false,"displayName":"Table","key":"0ul35w2hry","iconSVG":"/static/media/icon.db8a9cbd2acd22a31ea91cc37ea2a46c.svg","widgetId":"ccrsdlbcvm","renderMode":"CANVAS","accentColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"{{appsmith.theme.boxShadow.appBoxShadow}}","childStylesheet":{"button":{"buttonColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none"},"menuButton":{"menuColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none"},"iconButton":{"buttonColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none"},"editActions":{"saveButtonColor":"{{appsmith.theme.colors.primaryColor}}","saveBorderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","discardButtonColor":"{{appsmith.theme.colors.primaryColor}}","discardBorderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}"}},"isLoading":false,"parentColumnSpace":20.0625,"parentRowSpace":10,"leftColumn":14,"rightColumn":48,"topRow":145,"bottomRow":173,"parentId":"0","dynamicTriggerPathList":[],"originalTopRow":145,"originalBottomRow":173},{"isVisible":true,"shouldScrollContents":true,"widgetName":"Tabs1","animateLoading":true,"borderWidth":1,"borderColor":"#E0DEDE","backgroundColor":"#FFFFFF","minDynamicHeight":15,"tabsObj":{"tab1":{"label":"Tab 1","id":"tab1","widgetId":"4zaewfci4y","isVisible":true,"index":0},"tab2":{"label":"Tab 2","id":"tab2","widgetId":"i6ac4w48hr","isVisible":true,"index":1}},"shouldShowTabs":true,"defaultTab":"Tab 1","version":3,"maxDynamicHeight":9000,"dynamicHeight":"FIXED","type":"TABS_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Tabs","key":"blrs9324u1","iconSVG":"/static/media/icon.74a6d653c8201e66f1cd367a3fba2657.svg","isCanvas":true,"widgetId":"576oct3f8g","renderMode":"CANVAS","accentColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"{{appsmith.theme.boxShadow.appBoxShadow}}","isLoading":false,"parentColumnSpace":20.046875,"parentRowSpace":10,"leftColumn":18,"rightColumn":42,"topRow":28,"bottomRow":57,"parentId":"0","dynamicBindingPathList":[{"key":"accentColor"},{"key":"borderRadius"},{"key":"boxShadow"}],"children":[{"isVisible":true,"widgetName":"Canvas2","version":1,"detachFromLayout":true,"type":"CANVAS_WIDGET","hideCard":true,"isDeprecated":false,"displayName":"Canvas","key":"c5q0qzphez","canExtend":true,"isDisabled":false,"shouldScrollContents":false,"tabId":"tab1","tabName":"Tab 1","children":[],"bottomRow":240,"minHeight":240,"widgetId":"4zaewfci4y","renderMode":"CANVAS","isLoading":false,"parentColumnSpace":1,"parentRowSpace":1,"leftColumn":0,"rightColumn":481.125,"topRow":0,"parentId":"576oct3f8g","dynamicBindingPathList":[]},{"isVisible":true,"widgetName":"Canvas3","version":1,"detachFromLayout":true,"type":"CANVAS_WIDGET","hideCard":true,"isDeprecated":false,"displayName":"Canvas","key":"c5q0qzphez","canExtend":true,"isDisabled":false,"shouldScrollContents":false,"tabId":"tab2","tabName":"Tab 2","children":[{"isVisible":true,"animateLoading":true,"maxCount":5,"defaultRate":3,"activeColor":"{{appsmith.theme.colors.primaryColor}}","inactiveColor":"#E0DEDE","size":"LARGE","isRequired":false,"isAllowHalf":false,"isDisabled":false,"isReadOnly":false,"tooltips":["Terrible","Bad","Neutral","Good","Great"],"widgetName":"Rating2","minDynamicHeight":4,"maxDynamicHeight":9000,"dynamicHeight":"AUTO_HEIGHT","searchTags":["stars"],"type":"RATE_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Rating","key":"w7tg0fyr4q","iconSVG":"/static/media/icon.914eb943f3f3762263872a333aff727d.svg","widgetId":"c9a0ev0knr","renderMode":"CANVAS","isLoading":false,"parentColumnSpace":7.205078125,"parentRowSpace":10,"leftColumn":22,"rightColumn":42,"topRow":8,"bottomRow":12,"parentId":"i6ac4w48hr","dynamicBindingPathList":[{"key":"activeColor"}]}],"bottomRow":240,"minHeight":240,"widgetId":"i6ac4w48hr","renderMode":"CANVAS","isLoading":false,"parentColumnSpace":1,"parentRowSpace":1,"leftColumn":0,"rightColumn":481.125,"topRow":0,"parentId":"576oct3f8g","dynamicBindingPathList":[]}],"dynamicTriggerPathList":[]},{"width":456,"height":240,"minDynamicHeight":24,"canEscapeKeyClose":true,"animateLoading":true,"detachFromLayout":true,"canOutsideClickClose":true,"shouldScrollContents":true,"widgetName":"Modal2","children":[{"isVisible":true,"widgetName":"Canvas4","version":1,"detachFromLayout":true,"type":"CANVAS_WIDGET","hideCard":true,"isDeprecated":false,"displayName":"Canvas","key":"c5q0qzphez","canExtend":true,"isDisabled":false,"shouldScrollContents":false,"children":[{"isVisible":true,"iconName":"cross","buttonVariant":"TERTIARY","isDisabled":false,"widgetName":"IconButton2","version":1,"animateLoading":true,"searchTags":["click","submit"],"type":"ICON_BUTTON_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Icon Button","key":"ym75a7w8rt","iconSVG":"/static/media/icon.1a0c634ac75f9fa6b6ae7a8df882a3ba.svg","buttonColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","iconSize":24,"widgetId":"19nbe63tb9","renderMode":"CANVAS","boxShadow":"none","isLoading":false,"leftColumn":58,"rightColumn":64,"topRow":0,"bottomRow":4,"parentId":"22b2arf9sr","dynamicBindingPathList":[{"key":"buttonColor"},{"key":"borderRadius"}],"onClick":"{{closeModal('Modal2')}}"},{"isVisible":true,"text":"Modal Title","fontSize":"1.25rem","fontStyle":"BOLD","textAlign":"LEFT","textColor":"#231F20","widgetName":"Text2","shouldTruncate":false,"overflow":"NONE","version":1,"animateLoading":true,"minDynamicHeight":4,"maxDynamicHeight":9000,"dynamicHeight":"AUTO_HEIGHT","searchTags":["typography","paragraph","label"],"type":"TEXT_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Text","key":"tutq05ktuy","iconSVG":"/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg","widgetId":"gzae1zsezq","renderMode":"CANVAS","truncateButtonColor":"{{appsmith.theme.colors.primaryColor}}","fontFamily":"{{appsmith.theme.fontFamily.appFont}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","isLoading":false,"leftColumn":1,"rightColumn":41,"topRow":1,"bottomRow":5,"parentId":"22b2arf9sr","dynamicBindingPathList":[{"key":"truncateButtonColor"},{"key":"fontFamily"},{"key":"borderRadius"}]},{"isVisible":true,"animateLoading":true,"text":"Close","buttonVariant":"SECONDARY","placement":"CENTER","widgetName":"Button4","isDisabled":false,"isDefaultClickDisabled":true,"disabledWhenInvalid":false,"resetFormOnClick":false,"recaptchaType":"V3","version":1,"searchTags":["click","submit"],"type":"BUTTON_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Button","key":"2yyvxh8q6a","iconSVG":"/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg","buttonStyle":"PRIMARY","widgetId":"t0g3x74ibg","renderMode":"CANVAS","buttonColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none","isLoading":false,"leftColumn":31,"rightColumn":47,"topRow":18,"bottomRow":22,"parentId":"22b2arf9sr","dynamicBindingPathList":[{"key":"buttonColor"},{"key":"borderRadius"}],"onClick":"{{closeModal('Modal2')}}"},{"isVisible":true,"animateLoading":true,"text":"Confirm","buttonVariant":"PRIMARY","placement":"CENTER","widgetName":"Button5","isDisabled":false,"isDefaultClickDisabled":true,"disabledWhenInvalid":false,"resetFormOnClick":false,"recaptchaType":"V3","version":1,"searchTags":["click","submit"],"type":"BUTTON_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Button","key":"2yyvxh8q6a","iconSVG":"/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg","buttonStyle":"PRIMARY_BUTTON","widgetId":"8288muyiw3","renderMode":"CANVAS","buttonColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none","isLoading":false,"leftColumn":47,"rightColumn":63,"topRow":18,"bottomRow":22,"parentId":"22b2arf9sr","dynamicBindingPathList":[{"key":"buttonColor"},{"key":"borderRadius"}]},{"isVisible":true,"label":"Label","labelPosition":"Top","labelAlignment":"left","labelTextSize":"0.875rem","labelWidth":5,"widgetName":"Input1","version":2,"defaultText":"","iconAlign":"left","autoFocus":false,"labelStyle":"","resetOnSubmit":true,"isRequired":false,"isDisabled":false,"animateLoading":true,"inputType":"TEXT","minDynamicHeight":4,"maxDynamicHeight":9000,"dynamicHeight":"FIXED","searchTags":["form","text input","number","textarea"],"type":"INPUT_WIDGET_V2","hideCard":false,"isDeprecated":false,"displayName":"Input","key":"2r6vo22qxp","iconSVG":"/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg","widgetId":"qmku1b7xmj","renderMode":"CANVAS","accentColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none","isLoading":false,"parentColumnSpace":6.9375,"parentRowSpace":10,"leftColumn":21,"rightColumn":41,"topRow":7,"bottomRow":14,"parentId":"22b2arf9sr","dynamicBindingPathList":[{"key":"accentColor"},{"key":"borderRadius"}]}],"minHeight":240,"widgetId":"22b2arf9sr","renderMode":"CANVAS","isLoading":false,"parentColumnSpace":1,"parentRowSpace":1,"leftColumn":0,"rightColumn":481.125,"topRow":0,"bottomRow":240,"parentId":"gicjvabcts","dynamicBindingPathList":[]}],"version":2,"maxDynamicHeight":9000,"dynamicHeight":"AUTO_HEIGHT","searchTags":["dialog","popup","notification"],"type":"MODAL_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Modal","key":"u8mxhf08ot","iconSVG":"/static/media/icon.4975978e9a961fb0bfb4e38de7ecc7c5.svg","isCanvas":true,"widgetId":"gicjvabcts","renderMode":"CANVAS","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none","isLoading":false,"parentColumnSpace":20.046875,"parentRowSpace":10,"leftColumn":7,"rightColumn":31,"topRow":17,"bottomRow":257,"parentId":"0","dynamicBindingPathList":[{"key":"borderRadius"}]},{"isVisible":true,"animateLoading":true,"text":"Submit","buttonVariant":"PRIMARY","placement":"CENTER","widgetName":"Button6","isDisabled":false,"isDefaultClickDisabled":true,"disabledWhenInvalid":false,"resetFormOnClick":false,"recaptchaType":"V3","version":1,"searchTags":["click","submit"],"type":"BUTTON_WIDGET","hideCard":false,"isDeprecated":false,"displayName":"Button","key":"2yyvxh8q6a","iconSVG":"/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg","widgetId":"wr1yquusjr","renderMode":"CANVAS","buttonColor":"{{appsmith.theme.colors.primaryColor}}","borderRadius":"{{appsmith.theme.borderRadius.appBorderRadius}}","boxShadow":"none","isLoading":false,"parentColumnSpace":20.0625,"parentRowSpace":10,"leftColumn":22,"rightColumn":38,"topRow":20,"bottomRow":24,"parentId":"0","dynamicBindingPathList":[{"key":"buttonColor"},{"key":"borderRadius"}],"onClick":"{{showModal('Modal2')}}","dynamicTriggerPathList":[{"key":"onClick"}]}]}}
Reference in New Issue View Git Blame Copy Permalink