Lazy-load some Vue components, fix heatmap chunk loading on every page

[silverwind]

Lazy-load 3 Vue components that are safe to defer (no pop-in effects). This reduces index-domready from 515 KiB to 502 KiB (-2.5%).

The old vue3-calendar-heatmap vendor chunk (264 KiB) that previously loaded on every page is eliminated entirely — it was mostly duplicate tippy.js and vue copies that webpack had split out. The actual heatmap library is only ~12 KiB minified, now inlined into the ActivityHeatmap async chunk.

[Copilot]

Pull request overview

This pull request optimizes bundle size by implementing lazy loading for four Vue components that are safe to load asynchronously without causing visible pop-in effects. The changes move component imports from static to dynamic imports, reducing the main index-domready bundle by approximately 15kB and preventing the large vue3-calendar-heatmap library (260kB) from loading on every page.

Changes:

• Converted four Vue component imports to dynamic lazy-loaded imports using webpack's code-splitting
• Made corresponding functions async to handle dynamic imports
• Components affected: ContextPopup, PullRequestMergeForm, RepoFileSearch, and ActivityHeatmap

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
web_src/js/markup/refissue.ts	Lazy-loads ContextPopup component when showing issue reference tooltips; wraps component mounting in async IIFE within Tippy's onShow callback
web_src/js/features/repo-issue-pull.ts	Lazy-loads PullRequestMergeForm component; converts initRepoPullRequestMergeForm to async function
web_src/js/features/repo-findfile.ts	Lazy-loads RepoFileSearch component; converts registered init callback to async function
web_src/js/features/heatmap.ts	Lazy-loads ActivityHeatmap component inside existing try-catch block; proper error handling already present

Comments suppressed due to low confidence (1)

web_src/js/features/repo-findfile.ts:80

• The async callback function registered with registerGlobalInitFunc lacks error handling. If the dynamic import fails, the error will be unhandled and could potentially disrupt the page. Consider adding a try-catch block to gracefully handle import failures, similar to the pattern in heatmap.ts (lines 52-55) or file-view.ts (lines 42-46).

  registerGlobalInitFunc('initRepoFileSearch', async (el) => {
    const {default: RepoFileSearch} = await import(/* webpackChunkName: "RepoFileSearch" */ '../components/RepoFileSearch.vue');
    createApp(RepoFileSearch, {
      repoLink: el.getAttribute('data-repo-link'),
      currentRefNameSubURL: el.getAttribute('data-current-ref-name-sub-url'),
      treeListUrl: el.getAttribute('data-tree-list-url'),
      noResultsText: el.getAttribute('data-no-results-text'),
      placeholder: el.getAttribute('data-placeholder'),
    }).mount(el);
  });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[silverwind]

I've added a placeholder element for the rending of RepoFileSearch, so the pop-in effect is no longer visible on the repo page because it visually renders the same before and after JS loads.

ContextPopup and ActivityHeatmap and have no pop-in problems, so they are fine to lazy-load always.

PullRequestMergeForm now also has a space-reserving div added to avoid the vertical layout shift.

[silverwind]

Updated the placeholder so this "T" does not pop in on page load.