mirror of
https://github.com/prdlk/dotfiles.git
synced 2026-11-06 04:27:40 +00:00
shell: fish functions -> ~/.local/bin executables + bash/zsh ports; manage ~/.agents
- 16 cross-shell utilities converted to sh/bash chezmoi executables: ai c2p cp-appid extract_agents fab gdc gh-sonr-org-migrate ghg-clone ghn gho git-summary launch_omp_livediff_overlay lc-elir mdcp mdp pj (ghg-clone not named ghg: unrelated cargo binary owns that name) - cwd/history helpers stay per-shell: yy c cd clip-last + ghg/ghn/gho cd-wrappers in bash/functions/ and zsh/functions/, loaded by rc files - fish keeps only shell-state functions; converted ones now hit PATH - cp-appid ignore gating moved to .local/bin path - dot_agents/skills: 82 skills materialized from dotstate storage so dot_claude skill symlinks resolve on fresh bootstrap; dotstate profile/symlinks.json released .agents/skills .bashrc .zshrc
This commit is contained in:
1 parent
6776366ce6
commit
6406208b35
637 files changed
+100297
-497
No files matched your search
@@ -0,0 +1,143 @@
|
||||
# pf-intent-prefetch: Prefetch on User Intent (Hover, Focus)
|
||||
|
||||
## Priority: MEDIUM
|
||||
|
||||
## Explanation
|
||||
|
||||
Prefetch data when users show intent to navigate (hover, focus) rather than waiting for click. This eliminates perceived loading time for likely next actions.
|
||||
|
||||
## Bad Example
|
||||
|
||||
```tsx
|
||||
// No prefetching - data fetches on click
|
||||
function PostList({ posts }: { posts: Post[] }) {
|
||||
return (
|
||||
<ul>
|
||||
{posts.map(post => (
|
||||
<li key={post.id}>
|
||||
<Link to={`/posts/${post.id}`}>
|
||||
{post.title}
|
||||
</Link>
|
||||
{/* User clicks, waits for data to load */}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Good Example
|
||||
|
||||
```tsx
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import { postQueries } from '@/lib/queries'
|
||||
|
||||
function PostList({ posts }: { posts: Post[] }) {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const handlePrefetch = (postId: number) => {
|
||||
queryClient.prefetchQuery({
|
||||
...postQueries.detail(postId),
|
||||
staleTime: 60 * 1000, // Consider fresh for 1 minute
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{posts.map(post => (
|
||||
<li key={post.id}>
|
||||
<Link
|
||||
to={`/posts/${post.id}`}
|
||||
onMouseEnter={() => handlePrefetch(post.id)}
|
||||
onFocus={() => handlePrefetch(post.id)}
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Good Example: With TanStack Router
|
||||
|
||||
```tsx
|
||||
import { Link } from '@tanstack/react-router'
|
||||
|
||||
// TanStack Router has built-in prefetching
|
||||
function PostList({ posts }: { posts: Post[] }) {
|
||||
return (
|
||||
<ul>
|
||||
{posts.map(post => (
|
||||
<li key={post.id}>
|
||||
<Link
|
||||
to="/posts/$postId"
|
||||
params={{ postId: post.id }}
|
||||
preload="intent" // Prefetch on hover/focus
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
// Or set as router default
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
defaultPreload: 'intent',
|
||||
defaultPreloadDelay: 100, // Wait 100ms before prefetching
|
||||
})
|
||||
```
|
||||
|
||||
## Good Example: Prefetch with Delay
|
||||
|
||||
```tsx
|
||||
function PostLink({ post }: { post: Post }) {
|
||||
const queryClient = useQueryClient()
|
||||
const timeoutRef = useRef<NodeJS.Timeout>()
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
// Delay prefetch to avoid unnecessary requests on quick mouse movements
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
queryClient.prefetchQuery(postQueries.detail(post.id))
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/posts/${post.id}`}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Prefetch Triggers
|
||||
|
||||
| Trigger | When to Use |
|
||||
|---------|-------------|
|
||||
| `onMouseEnter` | Desktop, links/buttons user will likely click |
|
||||
| `onFocus` | Keyboard navigation, accessibility |
|
||||
| `onTouchStart` | Mobile, before navigation |
|
||||
| Component mount | Likely next pages, wizard steps |
|
||||
| Intersection Observer | Below-fold content |
|
||||
|
||||
## Context
|
||||
|
||||
- Set appropriate `staleTime` when prefetching to avoid immediate refetch
|
||||
- Consider mobile where hover isn't available
|
||||
- Don't prefetch everything - focus on likely paths
|
||||
- Prefetched data uses `gcTime` for retention
|
||||
- Watch network tab to verify prefetch timing
|
||||
Reference in new issue
Block a user