zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
fix: make URL validation non-blocking and default to valid filter
- Set up identity click handler and filter panel immediately
- Run URL validation in background without blocking UI
- After validation completes, automatically hide invalid apps
- Users can now interact with PDS panel while domains resolve
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+11
src/view/filters.js
+11
src/view/filters.js
···
111
});
112
}
113
114
+
// Apply the "valid" filter - hide invalid apps, show valid ones
115
+
// Called after URL validation completes
116
+
export function applyValidFilter() {
117
+
if (!state.globalApps) return;
118
+
if (state.invalidApps.size === 0) return; // Nothing to filter
119
+
120
+
// Hide only invalid apps
121
+
state.hiddenApps = new Set(state.invalidApps);
122
+
applyFilters();
123
+
}
124
+
125
export function initFilterPanel() {
126
loadHiddenApps();
127
+1
-1
src/view/main.js
+1
-1
src/view/main.js
+13
-10
src/view/visualization.js
+13
-10
src/view/visualization.js
···
10
validateAppUrls,
11
listRecords
12
} from './atproto.js';
13
-
import { initFilterPanel, repositionAppCircles } from './filters.js';
14
import { loadMSTStructure } from './mst.js';
15
16
export async function renderVisualization(apps, profile) {
···
98
// Add all divs to field
99
appDivs.forEach(({ div }) => field.appendChild(div));
100
101
-
// Fetch avatars asynchronously
102
fetchAppAvatars(appNames).then(avatarMap => {
103
appDivs.forEach(({ div, namespace }) => {
104
const avatarUrl = avatarMap[namespace];
···
109
});
110
});
111
112
-
// Validate app URLs (must complete before filter panel setup)
113
-
await validateAppUrls(appDivs);
114
-
115
-
// Set up identity click handler
116
-
setupIdentityClickHandler(allCollections, appCount, profile);
117
-
118
-
// Set up filter panel
119
-
initFilterPanel();
120
121
// Handle window resize
122
let resizeTimeout;
···
10
validateAppUrls,
11
listRecords
12
} from './atproto.js';
13
+
import { initFilterPanel, repositionAppCircles, applyValidFilter } from './filters.js';
14
import { loadMSTStructure } from './mst.js';
15
16
export async function renderVisualization(apps, profile) {
···
98
// Add all divs to field
99
appDivs.forEach(({ div }) => field.appendChild(div));
100
101
+
// Set up identity click handler immediately (non-blocking)
102
+
setupIdentityClickHandler(allCollections, appCount, profile);
103
+
104
+
// Set up filter panel immediately (non-blocking)
105
+
initFilterPanel();
106
+
107
+
// Fetch avatars asynchronously (non-blocking)
108
fetchAppAvatars(appNames).then(avatarMap => {
109
appDivs.forEach(({ div, namespace }) => {
110
const avatarUrl = avatarMap[namespace];
···
115
});
116
});
117
118
+
// Validate app URLs in background, then apply "valid" filter by default
119
+
validateAppUrls(appDivs).then(() => {
120
+
// After validation completes, default to hiding invalid apps
121
+
applyValidFilter();
122
+
});
123
124
// Handle window resize
125
let resizeTimeout;