Fix AI Workspace loader animation not rendering in Safari

[seminalworks]

The gooey blob effect relied on CSS blur()/contrast() filters applied to content referenced via a CSS mask, which Safari doesn't reliably render. Replaced the mask-based approach with a native SVG filter (feGaussianBlur + feColorMatrix) applied directly to the visible shapes, which renders consistently across Chrome, Safari, and Firefox.

Also fixes a layout regression (loader collapsing to zero height, causing text to overlap it) and pins the SVG's absolute position explicitly instead of relying on browser-guessed static positioning.

Ported from apim-saas PR #2912 following the migration to this repo.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 18078566-2bab-4760-af18-ccff3414d0ca

📥 Commits

Reviewing files that changed from the base of the PR and between 686be33 and 6840656.

📒 Files selected for processing (2)

• portals/ai-workspace/src/Components/AILoader.tsx
• portals/ai-workspace/src/styles.css

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The AI loader now renders filtered, gradient-filled polygons. CSS sets explicit dimensions and SVG rendering properties. The previous mask clipping, trailing .box element, clipping styles, and roundness animation were removed.

Changes

AI Loader Visuals

Layer / File(s)	Summary
Filtered SVG loader rendering portals/ai-workspace/src/Components/AILoader.tsx	The loader uses a vertical orange gradient and a blur/color-matrix goo filter. Overlapping polygons replace mask-based clipping, and the trailing .box element is removed.
Loader sizing and SVG styling portals/ai-workspace/src/styles.css	The loader receives explicit 100px dimensions. SVG positioning and rendering optimization styles replace obsolete box and clipping styles. The roundness animation is removed.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 68406

This localized UI change updates the loader rendering and positioning to improve Safari compatibility and prevent layout collapse; no actionable merge-blocking risk remains beyond normal checks and review.

Suggested reviewers: anugayan, arshardh, ashera96

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description explains the fix and includes screenshots, but it omits several required template sections, including tests, security checks, documentation, and test environment.	Add the missing template sections and provide test, security, documentation, sample, related PR, and test environment details.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary fix: Safari rendering for the AI Workspace loader animation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

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