Conditional Rendering

Relevant source files

The following files were used as context for generating this wiki page:

• main.go
• input.go
• README.md
• go.mod
• go.sum

Conditional rendering in the Wizard Tutorial project refers to the logic used within the terminal user interface (TUI) to display different views based on the application's internal state. This is primarily managed within the View method of the Main model, which decides whether to show a loading screen, the current question, or the final results page.

The project utilizes the Bubble Tea framework to handle the Elm-architecture style of state management, where the view is a pure function of the current model state. This ensures that the interface remains reactive to window resizing and user input transitions.
Sources: main.go:102-126, README.md:1-12

Rendering States and Logic

The application transitions through three distinct rendering states: Initialization, Active Questioning, and Completion. The Main.View() function implements this logic through a series of conditional checks against the m.done boolean and the m.width integer.

State Transitions

1. Loading State: Displayed when the window dimensions have not yet been received by the application.
2. Questioning State: The default active state where the current question and its associated input field are rendered.
3. Completion State: Triggered when m.done is true, displaying a summary of all questions and answers.

The following flowchart illustrates the decision-making process within the View method:

The diagram shows the logic flow inside main.go to determine which string output is sent to the terminal.
Sources: main.go:102-126

UI Components and Styling

The project uses Lip Gloss to handle layout and styling during the rendering process. When in the "Questioning State," the application dynamically centers the content using lipgloss.Place and joins the question text with the input field vertically.

Rendering Components

Component	Logic Reference	Description
Loading Text	m.width == 0	Simple string "loading..." displayed until tea.WindowSizeMsg is received.
Summary View	m.done == true	Iterates through m.questions to print a list of question-answer pairs.
Active Question	m.questions[m.index]	Displays the text of the current question being answered.
Input Field	current.input.View()	Renders either a textinput or textarea based on the interface implementation.

Sources: main.go:104-124, input.go:37-39, input.go:78-80

Visual Layout Architecture

The questioning view utilizes a nested rendering structure where the outer layout is managed by the Main model, and the internal input area is delegated to the specific Input component.

The layout architecture shows how the main application delegates specific component rendering to sub-models while maintaining a consistent container style.
Sources: main.go:114-124, input.go:7-16

Implementation Details

The conditional rendering is heavily dependent on the Main struct fields:

type Main struct {
	styles    *Styles
	index     int
	questions []Question
	width     int
	height    int
	done      bool
}

Sources: main.go:27-34

In the Update loop, the m.done flag is set when the user presses "enter" on the final question in the sequence. This immediately changes the output of the next View call.

case "enter":
    if m.index == len(m.questions)-1 {
        m.done = true
    }
    current.answer = current.input.Value()
    m.Next()
    return m, current.input.Blur

Sources: main.go:88-95

Summary

Conditional rendering in the Wizard Tutorial is a state-driven process that utilizes the Bubble Tea framework's functional approach to UI. By checking the application's lifecycle status (loading vs. active) and the completion flag (done), the system provides a seamless transition from a single-question input terminal to a comprehensive data summary. The use of Lip Gloss ensures that these transitions remain visually centered and formatted regardless of terminal size.