Skip to content

Update loading state for YourCoins and CoinCard to use skeleton - #12616

Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom
fs-coins-loading
Jul 30, 2025
Merged

Update loading state for YourCoins and CoinCard to use skeleton#12616
faridsalau merged 1 commit into
fs-artist-coinsfrom
fs-coins-loading

Conversation

@faridsalau

@faridsalaufaridsalau commented Jul 30, 2025

Copy link
Copy Markdown
Contributor

Description

We previously just rendered null while data was loading for the "Your Coins" section and completely hid the sub cards from view until fully loaded in. This led to the "Your Coins" section just not being shown for a decent amount of time with the recent API integration. Updated to use skeleton.

Also made a small import update to use the correct env import

How Has This Been Tested?

npm run web:prod

@changeset-bot

changeset-botBot commented Jul 30, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 332f829

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@faridsalau
faridsalau merged commit 3a6d058 into fs-artist-coinsJul 30, 2025
9 of 12 checks passed
@faridsalau
faridsalau deleted the fs-coins-loading branch July 30, 2025 15:39
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks

Assignees

No one assigned

Labels

size/M

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers
, '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" + '
Update loading state for YourCoins and CoinCard to use skeleton by faridsalau · Pull Request #12616 · AudiusProject/apps · GitHub
Skip to content
Update loading state for YourCoins and CoinCard to use skeleton - #12616
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Jul 30, 2025
Merged
Update loading state for YourCoins and CoinCard to use skeleton#12616
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jul 30, 2025

Copy link


Copy Markdown

Contributor
Description
We previously just rendered null while data was loading for the "Your Coins" section and completely hid the sub cards from view until fully loaded in. This led to the "Your Coins" section just not being shown for a decent amount of time with the recent API integration. Updated to use skeleton.
Also made a small import update to use the correct env import
How Has This Been Tested?
npm run web:prod
@changeset-bot
changeset-botBot
commented
Jul 30, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 332f829
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
merged commit 3a6d058
into
fs-artist-coinsJul 30, 2025

9 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-coins-loading

branch
July 30, 2025 15:39
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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('^' + ".*" + '
Update loading state for YourCoins and CoinCard to use skeleton by faridsalau · Pull Request #12616 · AudiusProject/apps · GitHub
Skip to content
Update loading state for YourCoins and CoinCard to use skeleton - #12616
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Jul 30, 2025
Merged
Update loading state for YourCoins and CoinCard to use skeleton#12616
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jul 30, 2025

Copy link


Copy Markdown

Contributor
Description
We previously just rendered null while data was loading for the "Your Coins" section and completely hid the sub cards from view until fully loaded in. This led to the "Your Coins" section just not being shown for a decent amount of time with the recent API integration. Updated to use skeleton.
Also made a small import update to use the correct env import
How Has This Been Tested?
npm run web:prod
@changeset-bot
changeset-botBot
commented
Jul 30, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 332f829
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
merged commit 3a6d058
into
fs-artist-coinsJul 30, 2025

9 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-coins-loading

branch
July 30, 2025 15:39
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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('^' + ".*" + '
Update loading state for YourCoins and CoinCard to use skeleton by faridsalau · Pull Request #12616 · AudiusProject/apps · GitHub
Skip to content
Update loading state for YourCoins and CoinCard to use skeleton - #12616
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Jul 30, 2025
Merged
Update loading state for YourCoins and CoinCard to use skeleton#12616
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jul 30, 2025

Copy link


Copy Markdown

Contributor
Description
We previously just rendered null while data was loading for the "Your Coins" section and completely hid the sub cards from view until fully loaded in. This led to the "Your Coins" section just not being shown for a decent amount of time with the recent API integration. Updated to use skeleton.
Also made a small import update to use the correct env import
How Has This Been Tested?
npm run web:prod
@changeset-bot
changeset-botBot
commented
Jul 30, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 332f829
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
merged commit 3a6d058
into
fs-artist-coinsJul 30, 2025

9 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-coins-loading

branch
July 30, 2025 15:39
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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" + '
Update loading state for YourCoins and CoinCard to use skeleton by faridsalau · Pull Request #12616 · AudiusProject/apps · GitHub
Skip to content
Update loading state for YourCoins and CoinCard to use skeleton - #12616
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Jul 30, 2025
Merged
Update loading state for YourCoins and CoinCard to use skeleton#12616
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jul 30, 2025

Copy link


Copy Markdown

Contributor
Description
We previously just rendered null while data was loading for the "Your Coins" section and completely hid the sub cards from view until fully loaded in. This led to the "Your Coins" section just not being shown for a decent amount of time with the recent API integration. Updated to use skeleton.
Also made a small import update to use the correct env import
How Has This Been Tested?
npm run web:prod
@changeset-bot
changeset-botBot
commented
Jul 30, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 332f829
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
merged commit 3a6d058
into
fs-artist-coinsJul 30, 2025

9 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-coins-loading

branch
July 30, 2025 15:39
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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('^' + ".*" + '
Update loading state for YourCoins and CoinCard to use skeleton by faridsalau · Pull Request #12616 · AudiusProject/apps · GitHub
Skip to content
Update loading state for YourCoins and CoinCard to use skeleton - #12616
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Jul 30, 2025
Merged
Update loading state for YourCoins and CoinCard to use skeleton#12616
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jul 30, 2025

Copy link


Copy Markdown

Contributor
Description
We previously just rendered null while data was loading for the "Your Coins" section and completely hid the sub cards from view until fully loaded in. This led to the "Your Coins" section just not being shown for a decent amount of time with the recent API integration. Updated to use skeleton.
Also made a small import update to use the correct env import
How Has This Been Tested?
npm run web:prod
@changeset-bot
changeset-botBot
commented
Jul 30, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 332f829
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
merged commit 3a6d058
into
fs-artist-coinsJul 30, 2025

9 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-coins-loading

branch
July 30, 2025 15:39
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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); }
})();
})();
Update loading state for YourCoins and CoinCard to use skeleton by faridsalau · Pull Request #12616 · AudiusProject/apps · GitHub
Skip to content
Update loading state for YourCoins and CoinCard to use skeleton - #12616
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Jul 30, 2025
Merged
Update loading state for YourCoins and CoinCard to use skeleton#12616
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-coins-loading
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jul 30, 2025

Copy link


Copy Markdown

Contributor
Description
We previously just rendered null while data was loading for the "Your Coins" section and completely hid the sub cards from view until fully loaded in. This led to the "Your Coins" section just not being shown for a decent amount of time with the recent API integration. Updated to use skeleton.
Also made a small import update to use the correct env import
How Has This Been Tested?
npm run web:prod
@changeset-bot
changeset-botBot
commented
Jul 30, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 332f829
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
merged commit 3a6d058
into
fs-artist-coinsJul 30, 2025

9 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-coins-loading

branch
July 30, 2025 15:39
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers