mattpocock/course-video-manager · Archived

optimize-loader

"Optimize slow React Router loaders by eliminating redundant DB queries, creating slim query variants, and parallelizing independent fetches. Use proactively when writing or reviewing loader code that calls domain operations services (e.g. CourseOperationsService, VideoOperationsService), or when triaging a slow page load."

First seen Jul 2, 2026

Installation

$ npx skills add mattpocock/course-video-manager --skill optimize-loader

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from mattpocock/course-video-manager.

npx skills add mattpocock/course-video-manager

Browse all from mattpocock/course-video-manager

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 723
Default branch main
Open issues 33
Status Archived

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,091 B
  • docs SUMMARY.md 346 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 9 installs

SKILL.md

Optimize Loader

Anti-patterns to catch

1. Re-fetching data the caller already has

If a loader fetches a record (e.g. getVideoWithClipsById) and then passes just the ID to a downstream function that re-fetches the same record internally — change the downstream function's signature to accept the already-fetched object.

// BAD — getNextVideoId internally calls getVideoWithClipsById again
const video = yield * db.getVideoWithClipsById(videoId);
const nextId = yield * db.getNextVideoId(videoId);

// GOOD — pass the already-fetched video
const video = yield * db.getVideoWithClipsById(videoId);
const nextId = yield * db.getNextVideoId(video);

When refactoring signatures, type the parameter as the minimal shape needed, not the full return type:

// Accept only what the function actually reads
function* (currentVideo: {
  id: string;
  lesson: {
    id: string;
    videos: Array<{ id: string; path: string }>;
    section: { repoVersion: { repo: { id: string } } };
  } | null;
})

2. Over-fetching nested relations

If a function only needs IDs and paths for navigation but loads full nested trees including clips, transcripts, etc. — create a slim query variant.

// BAD — loads clips, chapters, thumbnails etc. just to get video IDs
const course = yield * getCourseWithSectionsById(repoId);

// GOOD — dedicated lightweight query
const course = yield * getCourseNavigationData(repoId);

Slim query checklist:

  • columns: { id: true, path: true } — only select needed columns on leaf relations
  • limit: 1 on relations like versions where you only need the latest
  • Omit with: for relations you don't traverse (clips, chapters, thumbnails)
  • Keep where: filters (e.g. archived = false) and orderBy intact

3. Sequential independent queries

If a loader runs multiple independent DB calls sequentially, parallelize with Effect.all:

// BAD — sequential, total time = sum of both
const nextVideoId = yield * db.getNextVideoId(video);
const previousVideoId = yield * db.getPreviousVideoId(video);

// GOOD — parallel, total time = max of both
const [nextVideoId, previousVideoId] =
  yield * Effect.all([db.getNextVideoId(video), db.getPreviousVideoId(video)]);

Dependency injection pattern

When adding a new query (like getCourseNavigationData) that lives in course operations but is used by video operations:

  1. Add the query to db-course-operations.server.ts and export it
  2. Declare the cross-domain dependency in VideoOperationsService's effect block via yield* CourseOperationsService
  3. The Effect Layer system resolves cross-domain dependencies automatically