[pull] main from tinacms:main - #331
Merged
Merged
Conversation
https://www.youtube.com/watch?v=Psa1Xiixvy4 ## What changed The loading screens showed one fixed line: `Hang tight, TinaCMS is looking for llamas 🦙 🦙 🦙`. They now pick a random message from a bank of 16, swap it every two seconds, and fade between messages over 200ms. Follows #7529, which introduced the single line. Closes the request for Maxis-style rotating loading copy. ## How it works A new `LoadingMessage` component in `packages/tinacms/src/toolkit/components/loading-messages.tsx` holds the message bank and the timer. Three screens read from it: - `packages/tinacms/src/admin/components/LoadingPage.tsx` - `packages/tinacms/src/tina-cms.tsx` - `packages/tinacms/src/toolkit/react-sidebar/components/sidebar-loading-placeholder.tsx` Two details worth calling out: - The component picks its first message after mount, not during render, so the server and the browser render the same text and React does not warn about a hydration mismatch. - When a reader turns on `prefers-reduced-motion`, the text still changes but the fade does not run. The cycle length and fade length sit in `CYCLE_MS` and `FADE_MS` at the top of the file. ## Testing `packages/tinacms/src/toolkit/components/loading-messages.test.tsx` covers three cases: a swap never repeats the message it replaces, the first message varies across mounts, and the text fades out before it changes. ``` pnpm --filter tinacms vitest run src/toolkit/components/loading-messages.test.tsx ``` Three tests pass. Typecheck is clean for the changed files. ## Screenshots None. The change is copy and a fade. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01QNsgXGQZYrLTZaoZ5M9CiS --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
…7538) No linked issue. **TL;DR** Swap the two README image paths from repo-relative to absolute `raw.githubusercontent.com` URLs. They render on the npm package page again, and the README is unchanged on GitHub. **Pain:** the Tina logo and the demo GIF are broken on https://www.npmjs.com/package/tinacms, so the first thing anyone sees when they look the package up is two missing images. **Solution:** points both images at absolute URLs, so they resolve the same way wherever the README is rendered. Includes a patch changeset, because the npm page only picks the README up on the next publish. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )