Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Improve loading speed for updater page by arthurperton · Pull Request #7140 · statamic/cms · GitHub
Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve loading speed for updater page by arthurperton · Pull Request #7140 · statamic/cms · GitHub
Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve loading speed for updater page by arthurperton · Pull Request #7140 · statamic/cms · GitHub
Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Improve loading speed for updater page by arthurperton · Pull Request #7140 · statamic/cms · GitHub
Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve loading speed for updater page by arthurperton · Pull Request #7140 · statamic/cms · GitHub
Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Improve loading speed for updater page by arthurperton · Pull Request #7140 · statamic/cms · GitHub
Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Improve loading speed for updater page by arthurperton · Pull Request #7140 · statamic/cms · GitHub
Skip to content

Improve loading speed for updater page - #7140

Merged
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed
Nov 29, 2022
Merged

Improve loading speed for updater page#7140
jasonvarga merged 6 commits into
statamic:3.3from
arthurperton:fix/updater-page-speed

Conversation

@arthurperton

Copy link
Copy Markdown
Contributor

I've been noticing for a while that the updater page takes a long time to load. The same goes for the updater badge. Also the updater page doesn't show a loading indicator. This PR fixes / improves these issues.

Most of the loading time (several seconds each) was spent parsing the markdown in GithubReleasePresenter@toHtml() and determining if a version was a 'upgrade', 'current' or 'downgrade' version in Changelog@parseReleaseType().

Changes:

  • Parse markdown on the frontend
  • Remember the release type, everything after the first 'downgrade' must be a downgrade too*
  • Start loading the changelog in the Vue created() method instead of waiting for mounted()
  • Fix a JS error that prevented the loading indicator from rendering

* This assumes that the API returns the releases sorted, latest release first. Which seems to be the case.

@what-the-diff

what-the-diffBot commented Nov 29, 2022

Copy link
Copy Markdown
  • The body attribute of the release object is now a string instead of an HTML-formatted string.
  • The GithubReleasePresenter class has been deprecated and removed from the codebase, as it was only used in one place (the ChangelogTests test).
  • In Release.vue, we have added some logic to format markdown strings into html with labels for new features/fixes/breaking changes etc., which were previously formatted by GithubReleasePresenter before being passed down to VueJS via props on mount(). This change also removes any references to this presenter throughout the codebase (including tests) and replaces them with calls directly to Marketplace::releases() or $this->getChangelog(), depending on context - see UpdaterTest for examples where these methods are called within PHPUnit tests that need access to changelogs without mounting components first; otherwise they can be accessed through component props after mounting occurs in other places such as UpdaterController@index().

@jasonvargajasonvarga left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice.

I've marked the presenter class as deprecated since now it's not used anywhere. I haven't removed it completely because maybe someone else is using it.

@jasonvarga
jasonvarga merged commit 7398488 into statamic:3.3Nov 29, 2022
@arthurperton
arthurperton deleted the fix/updater-page-speed branch November 29, 2022 15:15
@jasonvargajasonvarga mentioned this pull request Feb 13, 2023
Sign up for freeto 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.

2 participants

@arthurperton@jasonvarga