style(renderer): add additional load states for blocks

[johbaxter]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

Title

style(renderer): add additional load states for blocks

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement, Documentation

---

Description

• Add loading state to container, text, markdown

• Render skeleton or hide when loading

• Expose designer settings for load state/type

• Add migrations and defaults for new fields

---

Diagram Walkthrough

flowchart LR
  UI["Designer settings: ShowLoadingSettings"] -- "sets" --> BlockData["Block data: loading, loadType"]
  BlockData -- "passed to" --> Renderer["Renderer blocks (Container/Text/Markdown)"]
  Renderer -- "if loading + type" --> Skeleton["Render Skeleton or nothing"]
  MigrationMgr["MigrationManager version bump"] -- "registers" --> Migrations["alpha.13→14, alpha.14→15"]
  Migrations -- "initialize new fields; cleanup vars" --> State["Persisted state"]

Loading

File Walkthrough

	Relevant files
Enhancement	11 files ContainerBlock.tsx Add loading logic and Skeleton rendering                                  +25/-0    MarkdownBlock.tsx Add loading and Skeleton to markdown                                          +25/-1    TextBlock.tsx Add loading and Skeleton to text                                                  +25/-0    MigrationManager.ts Bump state version and register migrations                              +7/-1      migrate__1_0_0_alpha_13__to___1_0_0_alpha_14.ts Migration adds loading defaults to blocks                                +32/-0    migrate__1_0_0_alpha_14__to___1_0_0_alpha_15.ts Migration removes variable I/O flags                                          +24/-0    config.tsx Add Loading settings section to container                                +10/-0    config.tsx Add Loading settings section to markdown                                  +10/-0    config.tsx Add Loading settings section to text                                          +10/-0    SelectSettings.tsx Support single or multiple select modes                                    +8/-1      ShowLoadingSettings.tsx New shared loading settings component                                        +48/-0
Configuration changes	4 files config.tsx Default loading fields for container                                          +2/-1      config.tsx Default loading fields for markdown                                            +2/-0      config.tsx Default loading fields for text                                                    +2/-0      default-menu.ts Seed defaults with loading fields                                                +54/-11

---

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Type Robustness The new loading and loadType fields are typed as very broad (boolean | string and string), but logic compares string values (e.g., "true", "Skeleton"). This can lead to subtle bugs if unexpected values are provided. Consider narrowing types or centralizing parsing/validation with enums to avoid typos and casing issues. Migration Safety Migration sets loading and loadType on blocks by widget name without guarding that data exists or checking for prior values. Confirm all targeted blocks have data objects and that overriding does not clobber user-defined values. Consider conditional assignment only if fields are undefined. Object.entries(newState.blocks).forEach((keyValue) => { const block = keyValue[1]; if (block.widget === "container") { block.data.loading = false; block.data.loadType = "Skeleton"; } if (block.widget === "text") { block.data.loading = false; block.data.loadType = "Skeleton"; } if (block.widget === "markdown") { block.data.loading = false; block.data.loadType = "Skeleton"; } Backward Compatibility Autocomplete previously forced multiple selection; it now depends on a new multiple prop defaulting to true. Verify all existing usages are updated to pass the intended multiple value to avoid behavior changes in other settings. } }, 300); }; return ( <BaseSettingSection label={label}> <Autocomplete fullWidth multiple={multiple} value={value} options={options} getOptionLabel={(option) => option} onChange={(_, value) => {

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Defensively update migration data Avoid mutating the original block.data shapes for unrelated widgets and ensure data exists before assignment. Narrow updates to known widgets with a defensive check to prevent runtime errors on blocks lacking data. libs/renderer/src/store/state/migration/migrate__1_0_0_alpha_13__to___1_0_0_alpha_14.ts [10-26] -Object.entries(newState.blocks).forEach((keyValue) => { - const block = keyValue[1]; - if (block.widget === "container") { - block.data.loading = false; - block.data.loadType = "Skeleton"; - } - - if (block.widget === "text") { - block.data.loading = false; - block.data.loadType = "Skeleton"; - } - - if (block.widget === "markdown") { +Object.values(newState.blocks).forEach((block) => { + if (!block?.data) return; + if (block.widget === "container" || block.widget === "text" || block.widget === "markdown") { block.data.loading = false; block.data.loadType = "Skeleton"; } }); Suggestion importance[1-10]: 7 __ Why: Adding a guard for block.data prevents runtime errors during migration and consolidates the widget checks cleanly. It’s accurate and improves safety without altering intended behavior.	Medium
	Safely compute loading flag Guard against non-object data to prevent runtime errors when data is null/undefined during initial renders. Use optional chaining on data and a safer boolean coercion for loading. libs/renderer/src/components/block-defaults/*-block/*Block.tsx [79-81] const isLoading = - Object.hasOwn(data, "loading") && - data.loading?.toString().toLowerCase() === "true"; + !!data?.loading && data.loading.toString().toLowerCase() === "true"; Suggestion importance[1-10]: 4 __ Why: The idea to guard against undefined data is reasonable, but the improved code changes semantics by coercing truthy non-"true" values (e.g., "false") to true via !!data?.loading, which is incorrect. It reduces correctness despite addressing a potential null check.	Low
General	Normalize and default load type Provide a safe default for loadType to avoid undefined comparisons and render a consistent loading state. Normalize loadType and compare against normalized values to prevent case/format mismatches. libs/renderer/src/components/block-defaults/*-block/*Block.tsx [83-99] -if (isLoading && data.loadType === "None (show nothing)") { +const loadType = (data?.loadType ?? "Skeleton").toString(); + +if (isLoading && loadType === "None (show nothing)") { return <div {...attrs} />; } -if (isLoading && data.loadType === "Skeleton") { +if (isLoading && loadType === "Skeleton") { return ( - <div - style={{ - width: "auto", - height: "auto", - }} - {...attrs} - > - <Skeleton width={"auto"} height={"auto"} /> + <div style={{ width: "auto", height: "auto" }} {...attrs}> + <Skeleton width="auto" height="auto" /> </div> ); } Suggestion importance[1-10]: 6 __ Why: Providing a default and normalizing loadType averts undefined comparisons and improves robustness with minimal risk. The change aligns with the new loading branches, though it’s a minor enhancement rather than a critical fix.	Low

[github-actions]

@CodiumAI-Agent /update_changelog