Skip to content

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Sep 9, 2025

Fixed the skeleton screen overflow issue that caused horizontal scrollbar flashing when first entering the page.

Original issue description:

🐛 bug 描述

Image

📷 复现步骤 | Recurrence steps

预览站点刷新即可看到。

🏞 期望结果 | Expected results

优化这个样式,减少刷新时候的闪烁跳动。

Changes Made

  • public/scripts/loading.js: Added overflow-x: hidden and proper width constraints to prevent horizontal scrolling during initial page load
  • src/loading.tsx: Added maxWidth: 100% and boxSizing: border-box to React Skeleton component
  • src/global.less: Added overflow-x: hidden to global html/body styles

The fix ensures that skeleton loading screens and initial loading animations stay within viewport boundaries, eliminating the horizontal scrollbar flash that occurs when first entering the page.

Fixes #11556.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copy link

cloudflare-workers-and-pages bot commented Sep 9, 2025

Deploying ant-design-pro with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3998b84
Status: ✅  Deploy successful!
Preview URL: https://a53dfd5f.ant-design-pro-nd3.pages.dev
Branch Preview URL: https://copilot-fix-skeleton-screen.ant-design-pro-nd3.pages.dev

View logs

Copy link

github-actions bot commented Sep 9, 2025

⚡️ Deploying PR Preview...

Copy link

codecov bot commented Sep 9, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 53.67%. Comparing base (4b39b93) to head (658776e).

Additional details and impacted files
@@           Coverage Diff           @@
##           master   #11557   +/-   ##
=======================================
  Coverage   53.67%   53.67%           
=======================================
  Files          84       84           
  Lines         598      598           
  Branches       79       81    +2     
=======================================
  Hits          321      321           
  Misses        277      277           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@afc163
Copy link
Member

afc163 commented Sep 9, 2025

@copilot 你没有提交代码,重来

Copy link
Author

Copilot AI commented Sep 9, 2025

@copilot 你没有提交代码,重来

I've now implemented the fix for the skeleton screen overflow issue. The changes prevent horizontal scrollbar flashing by adding overflow-x: hidden and proper width constraints to the loading elements. This addresses the issue shown in the bug report where skeleton loading content was exceeding page width on initial load.

Commit: 3998b84

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • gw.alipayobjects.com

If you need me to access, download, or install something from one of these locations, you can either:

@Copilot Copilot AI changed the title [WIP] 🐛 [BUG] 首次进入页面,加载骨架屏会超出页面宽度,出现滚动条闪烁。 🐛 [BUG] 首次进入页面,加载骨架屏会超出页面宽度,出现滚动条闪烁。 Sep 9, 2025
Copilot finished work on behalf of afc163 September 9, 2025 08:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 [BUG] 首次进入页面,加载骨架屏会超出页面宽度,出现滚动条闪烁。
2 participants