fix (design library): fix spinner showing

[kaeizen]

Summary by CodeRabbit

• Style
  • Refines loading spinner presentation in the design library editor with a white background and adjusted layering to improve visibility.
  • Ensures the spinner no longer overlays or blocks content when hidden, enhancing interaction clarity.
  • Provides a cleaner, more consistent loading state without altering functionality or behavior.

[coderabbitai]

Walkthrough

Updates editor.scss to adjust spinner container styling: adds white background and z-index: 1 to .stk-spinner-container, and sets z-index: -1 when .stk-hide-spinner is applied. No logic or control-flow changes.

Changes

Cohort / File(s)	Summary of changes
Styling — Spinner layering src/components/design-library-list/editor.scss	Added background-color: #fff and z-index: 1 to .stk-spinner-container; applied z-index: -1 under .stk-hide-spinner. Presentation-only adjustments.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

I twitched my ears at layers thin,
A spinner now sits tucked within—
White as clouds, then out of sight,
When hidden, slips beneath the light.
Hop-hop! CSS—so neat, so slight. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title follows a concise conventional commit style by specifying the “fix” type, the “design library” scope, and the core subject “spinner showing,” which aligns directly with the CSS layering adjustments to the spinner container described in the changeset. It clearly summarizes the primary intent of the pull request without introducing unrelated details or extraneous language.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/design-library-spinner

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

• Public repositories are always opted into early access features.
• You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3605-stackable-3605-merge.zip	c7f23e8

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3605-stackable-3605-merge.zip"}}]}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/design-library-list/editor.scss (1)

251-254: Consider transitioning z-index or adding pointer-events: none.

While the opacity transition provides a smooth fade-out, the z-index change is instant. During the fade-out period (0.3s), the spinner container remains at z-index: 1 with opacity: 0, which might still block pointer events to elements beneath it until the transition completes.

Consider one of these approaches:

Option 1: Add pointer-events control

 &.stk-hide-spinner {
   opacity: 0;
   z-index: -1;
+  pointer-events: none;
 }

Option 2: Use visibility for instant hiding

 &.stk-hide-spinner {
   opacity: 0;
   z-index: -1;
+  visibility: hidden;
 }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c276f35 and c7f23e8.

📒 Files selected for processing (1)

• src/components/design-library-list/editor.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 7.3 and WP latest

🔇 Additional comments (1)

src/components/design-library-list/editor.scss (1)

249-250: LGTM! Background and z-index ensure spinner visibility.

The white background creates a blocking layer that ensures the spinner is visible and prevents interaction with underlying content during loading. The z-index: 1 positions it above the design library items.