Open code, practice, and notes →

Download source with English comments · for reading

23 · Loading UI and progress

Week 4 / original Day 23 · Document and example provided · This is a learning sequence, not a fixed daily workload.

Full roadmap · Workspace usage

Goal

Display progress based on actual stages and available evidence.

Prerequisites

19, 22, Promise and cancellation.

Key concepts and explanations

Transfer, parsing, GPU preparation, and the first image are separate stages. Display byte-based progress only when transfer amounts are known; use an indeterminate loading state if the total size is unknown. A transfer at 100% may not mean everything is complete.

Design failure and retry handling, cancellation during transitions, or ignoring late responses. Do not mix success and failure states or display arbitrary numbers as real progress.

Skills you will develop

• Display progress based on actual stages and available evidence.
• Reproduce the completion criteria below and answer the self-check questions in your own words.

Exercises

1. Divide loading into idle/loading/ready/error and write the text for each state.
2. Distinguish the UI for transfers with a known file size from transfers with an unknown size.
3. Test retry after failure, switching during loading, and switching just before completion.

Variables to observe

Whether total size information is available, network delay, response order, failure location.

Completion criteria

• Can explain the basis for displayed numbers.
• Implemented or tested retry and cancellation/ignore flows.
• Can distinguish first-image readiness from transfer completion.

Self-check questions

1. Is it appropriate to display 50% when the total size is unknown?
2. What state accurately describes parsing in progress?

Official references

• LoadingManager
• AbortController

Experiment notes — fill these in yourself

Goal

Key concepts

Changed variables and predictions

Actual results

What I learned

Remaining questions

Previous: React+Three.js component design · Next: Camera movement·rotation·zoom

Linked example and execution scope

Runnable source code · Workspace unit ID: 23-loading-ui

A simulated loader with controlled delays and progress. It does not measure actual network transfer amounts.

Any previously saved code is preserved. To use the new original source, first back up everything as a full JSON file, then select Restore original code. Your notes are not erased.

Open code, practice, and notes →