reduce layout shift when loading repo
859 unmodified linesExpand all860861862863864865866867868869870871872873874875876877878530 unmodified linesExpand all14091410141114121413141414151416141719 unmodified lines14371438143914401441144214431444144514466 unmodified lines145314541455145614571458145914601461146214631464146514661467146814691470776 unmodified linesExpand all859 unmodified linesExpand all cursor: pointer; list-style: none;}
.untangled-language-bar-loading { cursor: default; pointer-events: none;}
.untangled-language-bar-skeleton { width: 100%; height: 100%; border-radius: 0.25rem 0.25rem 0 0;}
.untangled-language-bar::-webkit-details-marker { display: none;}
530 unmodified linesExpand all}
.untangled-repo-action-main { gap: 0.5rem; min-width: 4.75rem; padding: 0 0.75rem; flex: 1 1 auto; justify-content: center; position: relative;19 unmodified lines
.untangled-repo-action-count { border-left: 1px solid rgb(209 213 219); background: rgb(249 250 251); justify-content: center; min-width: 2.5rem; padding: 0 0.75rem; position: relative; text-decoration: none;}6 unmodified lines.untangled-repo-tab { min-width: 80px;}
.untangled-repo-tab-meta { display: inline-flex; justify-content: center; min-width: 1.25rem;}
.untangled-repo-tab-meta-placeholder { visibility: hidden;}
.group:hover .untangled-repo-tab-idle { background: rgb(243 244 246 / 0.25);}
776 unmodified linesExpand all37 unmodified lines3839404142434445463 unmodified lines50515253535455545556575859606162636465666 unmodified lines73747576707172737475767778798081828384858687777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611789909111811912012193949512212312412512612797989910010112812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319444 unmodified lines239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306218 unmodified linesExpand all525526527528385529530531532533534535536387388389390537538539540541542543544545394395396546547548549550399400401402551552553554555556557558559560409410561562563564413414415416417565566567568569965 unmodified linesExpand all37 unmodified lines href: string; icon: JSX.Element; label: string; meta?: string; reserveMeta?: boolean;}> = (props) => ( <A href={props.href} class="relative -mr-px group no-underline hover:no-underline"> <div class={clsx(3 unmodified lines > <span class="flex items-center justify-center gap-2"> {props.icon} {props.label} <Show when={props.meta}> <span class="rounded bg-gray-200 px-1 text-sm text-gray-700 dark:bg-gray-700 dark:text-gray-200"> {props.meta} <Show when={props.meta !== undefined || props.reserveMeta}> <span aria-hidden={props.meta === undefined ? 'true' : undefined} class={clsx( 'untangled-repo-tab-meta rounded bg-gray-200 px-1 text-sm text-gray-700 dark:bg-gray-700 dark:text-gray-200', props.meta === undefined && 'untangled-repo-tab-meta-placeholder', )} > {props.meta ?? '0'} </span> </Show> </span> </div>6 unmodified linesconst prFileTreeSkeletonRows = Array.from({ length: 8 });const prDiffFileSkeletons = Array.from({ length: 2 });const prDiffCodeLines = Array.from({ length: 8 });
export const RepoTreeSkeleton: Component = () => ( <div class="flex flex-col gap-4"> <div class={cardStyles('overflow-hidden')}> <SkeletonBlock class="h-2 rounded-none" /> <div class="flex flex-wrap items-center gap-3 border-b border-gray-200 px-4 py-3 dark:border-gray-700"> <SkeletonBlock class="h-8 w-32" /> <SkeletonBlock class="h-6 w-48" /> <SkeletonBlock class="ml-auto h-6 w-24" /> </div> <div class="divide-y divide-gray-100 dark:divide-gray-700"> <For each={skeletonRows}> {(_, index) => ( <div class="untangled-skeleton-file-row px-4 py-3"> <div class="flex min-w-0 items-center gap-3"> <SkeletonBlock class="size-5 shrink-0 rounded-sm" /> <SkeletonBlock class={index() % 3 === 0 ? 'h-5 w-1/3' : 'h-5 w-2/3'} /> </div> <SkeletonBlock class="h-4 w-24 justify-self-end" />export const RepoLanguageBarSkeleton: Component = () => ( <div class="group -my-4 -m-6 mb-4" aria-hidden="true"> <div class="untangled-language-bar untangled-language-bar-loading"> <SkeletonBlock class="untangled-language-bar-skeleton" /> </div> </div>);
const TreeRowsSkeleton: Component = () => ( <div class="space-y-3"> <For each={skeletonRows}> {(_, index) => ( <div class="untangled-file-row"> <div class="flex min-w-0 items-center gap-2"> <SkeletonBlock class="size-4 shrink-0 rounded-sm" /> <SkeletonBlock class={index() % 3 === 0 ? 'h-5 w-1/3' : 'h-5 w-2/3'} /> </div> <SkeletonBlock class="h-4 w-16 justify-self-end" /> </div> )} </For> </div>);
const RepoOverviewSidebarSkeleton: Component = () => ( <div class="min-w-0 md:pt-0 md:pl-6 border-gray-100 dark:border-gray-700 md:border-t-0 md:border-l"> <div class="flex items-center gap-2 pb-3 font-bold"> <SkeletonBlock class="size-4" /> <SkeletonBlock class="h-5 w-20" /> <SkeletonBlock class="h-5 w-8" /> </div> <div class="space-y-6"> <For each={Array.from({ length: 5 })}> {(_, index) => ( <div> <SkeletonBlock class={index() % 2 === 0 ? 'h-5 w-5/6' : 'h-5 w-2/3'} /> <div class="mt-2 flex flex-wrap items-center gap-2"> <SkeletonBlock class="h-6 w-20" /> <SkeletonBlock class="size-6 rounded-full" /> <SkeletonBlock class="h-4 w-24" /> </div> )} </For> </div> </div> )} </For> </div> <div class={cardStyles('overflow-hidden')}> <div class="border-b border-gray-200 px-4 py-3 dark:border-gray-700"> <SkeletonBlock class="h-5 w-28" /> <div class="mt-6 border-t border-gray-200 pt-4 dark:border-gray-700"> <div class="flex items-center gap-2 pb-2 font-bold"> <SkeletonBlock class="size-4" /> <SkeletonBlock class="h-5 w-20" /> <SkeletonBlock class="h-5 w-8" /> </div> <div class="space-y-3 p-5"> <SkeletonBlock class="h-5 w-3/4" /> <SkeletonBlock class="h-5 w-11/12" /> <SkeletonBlock class="h-5 w-2/3" /> <SkeletonBlock class="h-5 w-5/6" /> <div class="space-y-2"> <SkeletonBlock class="h-4 w-2/3" /> <SkeletonBlock class="h-4 w-1/2" /> </div> </div> </div>);
export const RepoTreeSkeleton: Component<{ nested?: boolean }> = (props) => ( <> <section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white"> <RepoLanguageBarSkeleton /> <div class="flex items-center justify-between gap-4 pb-5"> <div class="flex items-center gap-2"> <SkeletonBlock class="h-8 w-36" /> <SkeletonBlock class="size-8" /> </div> <SkeletonBlock class="h-8 w-40" /> </div>
<Show when={props.nested}> <div> <div class="pb-2 mb-3 border-b border-gray-200 dark:border-gray-700"> <SkeletonBlock class="h-5 w-2/3" /> </div> <div class="pb-2 mb-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between flex-wrap gap-2"> <div class="flex min-w-0 flex-wrap items-center gap-2"> <SkeletonBlock class="size-6 rounded-full" /> <SkeletonBlock class="h-4 w-28" /> <SkeletonBlock class="h-4 w-2/5" /> <SkeletonBlock class="h-4 w-20" /> </div> <SkeletonBlock class="h-6 w-20" /> </div> </div> </Show>
<div class={clsx('untangled-repo-overview', props.nested && 'untangled-repo-overview--path')}> <div class="untangled-file-tree-pane min-w-0 pr-0 md:pr-6"> <TreeRowsSkeleton /> </div> <Show when={!props.nested}> <RepoOverviewSidebarSkeleton /> </Show> </div> </section> <div class="mt-4 rounded bg-white dark:bg-gray-800 shadow-sm w-full mx-auto overflow-hidden"> <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center gap-2"> <SkeletonBlock class="size-4" /> <SkeletonBlock class="h-4 w-24" /> </div> <section class="px-6 py-6 overflow-auto"> <div class="space-y-3"> <SkeletonBlock class="h-5 w-3/4" /> <SkeletonBlock class="h-5 w-11/12" /> <SkeletonBlock class="h-5 w-2/3" /> <SkeletonBlock class="h-5 w-5/6" /> </div> </section> </div> </>);
export const RepoBlobSkeleton: Component = () => ( <div class={cardStyles('overflow-hidden')}> <div class="flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 dark:border-gray-700"> <div class="min-w-0 flex-1 space-y-2">44 unmodified lines </For> </div>);
export const RepoListPageSkeleton: Component<{ kind: 'issues' | 'pulls'; showCreate?: boolean;}> = (props) => ( <> <div class="rounded bg-white p-4 dark:bg-gray-800"> <div class="untangled-filter-grid"> <div class="flex items-stretch rounded border border-gray-300 dark:border-gray-700"> <SkeletonBlock class="h-8 w-20 rounded-none" /> <SkeletonBlock class="h-8 w-20 rounded-none" /> <Show when={props.kind === 'pulls'}> <SkeletonBlock class="h-8 w-24 rounded-none" /> </Show> </div> <div class="untangled-repo-filter-search"> <SkeletonBlock class="h-8 w-full" /> </div> <Show when={props.showCreate}> <SkeletonBlock class="h-8 w-28 justify-self-end" /> </Show> </div> </div> <div class="mt-2"> <RepoListSkeleton kind={props.kind} /> </div> </>);
export const RepoFormSkeleton: Component<{ titleWidth?: string }> = (props) => ( <div class={cardStyles('p-6')}> <div class="flex flex-col gap-4"> <SkeletonBlock class={clsx('h-8', props.titleWidth ?? 'w-40')} /> <SkeletonBlock class="h-10 w-full" /> <SkeletonBlock class="h-64 w-full" /> <SkeletonBlock class="h-9 w-32 self-end" /> </div> </div>);
export const PullComposeSkeleton: Component = () => ( <div id="pr-compose-host" class="flex flex-col bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white"> <div class="flex flex-col gap-6"> <For each={Array.from({ length: 3 })}> {(_, index) => ( <section class="untangled-new-pr-step"> <div class="untangled-new-pr-heading"> <SkeletonBlock class="size-6 rounded-full" /> <SkeletonBlock class={index() === 0 ? 'h-4 w-16' : 'h-4 w-20'} /> </div> <div class="ml-10 flex flex-col gap-3"> <SkeletonBlock class="h-14 w-full" /> <SkeletonBlock class={index() === 1 ? 'h-56 w-full' : 'h-10 w-2/3'} /> </div> </section> )} </For> </div> </div>);
const IssueThreadSkeleton: Component = () => ( <div class="grid grid-cols-1 gap-4 w-full md:grid-cols-10"> <div class="col-span-1 min-w-0 md:col-span-8"> <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">218 unmodified linesExpand all <PullThreadSkeleton /> </Show>);
export const RepoFrameSkeleton: Component<{ active: 'code' | 'issues' | 'pulls' }> = (props) => (const defaultRepoFrameSkeletonContent = (active: 'code' | 'issues' | 'pulls') => active === 'code' ? <RepoTreeSkeleton /> : <RepoListPageSkeleton kind={active === 'issues' ? 'issues' : 'pulls'} />;
export const RepoFrameSkeleton: Component<{ active: 'code' | 'issues' | 'pulls'; children?: JSX.Element;}> = (props) => ( <> <section class="flex w-full flex-col gap-4 px-4 py-5"> <div class="flex flex-wrap items-start justify-between gap-4"> <div class="min-w-0 flex-1"> <div class="flex min-w-0 items-center gap-2"> <section id="repo-header" class="mb-2 py-2 px-4"> <div class="flex flex-col sm:flex-row items-start gap-4 justify-between mb-2"> <div class="flex gap-2"> <div class="flex items-center gap-2 flex-wrap text-lg"> <SkeletonBlock class="size-8 rounded-full" /> <SkeletonBlock class="h-6 w-40" /> </div> </div> <div class="hidden sm:block sm:flex-shrink-0"> <div class="mt-3 flex flex-wrap items-center gap-2"> <SkeletonBlock class="h-5 w-72" /> <SkeletonBlock class="h-5 w-24" /> <div class="untangled-repo-actions"> <SkeletonBlock class="h-8 w-32" /> <SkeletonBlock class="h-8 w-20" /> </div> </div> <div class="flex items-center gap-2"> <SkeletonBlock class="h-9 w-24" /> <SkeletonBlock class="h-9 w-20" /> </div> </div> <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm"> <SkeletonBlock class="h-5 w-72" /> <SkeletonBlock class="h-5 w-24" /> </div> </section> <section class="w-full flex flex-col"> <nav class="w-full pl-4 overflow-auto"> <div class="flex z-60"> <RepoTabLink active={props.active === 'code'} href="#" icon={<SkeletonBlock class="size-4" />} label="overview" /> <RepoTabLink active={props.active === 'issues'} href="#" icon={<SkeletonBlock class="size-4" />} label="issues" /> <RepoTabLink active={props.active === 'pulls'} href="#" icon={<SkeletonBlock class="size-4" />} label="pulls" /> <RepoTabLink active={props.active === 'issues'} href="#" icon={<SkeletonBlock class="size-4" />} label="issues" reserveMeta /> <RepoTabLink active={props.active === 'pulls'} href="#" icon={<SkeletonBlock class="size-4" />} label="pulls" reserveMeta /> </div> </nav> <div class="mt-2 px-4 pb-6"> <Show when={props.active === 'code'} fallback={<RepoListSkeleton kind={props.active === 'issues' ? 'issues' : 'pulls'} />}> <RepoTreeSkeleton /> </Show> </div> {props.children ?? defaultRepoFrameSkeletonContent(props.active)} </section> </>);
965 unmodified linesExpand all3 unmodified lines4567889101112103 unmodified linesExpand all116117118119120121121122123124125126101 unmodified linesExpand all228229230231231232233234234235236237238239273 unmodified linesExpand all51351451551651751851952052132 unmodified lines55455555655755655855956055956156256356456519 unmodified lines585586587588587589590591592593267 unmodified linesExpand all861862863864863865866867868869143 unmodified linesExpand all3 unmodified linesimport { createQuery, keepPreviousData, useQueryClient } from '@tanstack/solid-query';import { For, Match, Show, Switch, createEffect, createMemo, createSignal, type Component } from 'solid-js';import { buildBlobDataUrl, decodeBlobText, getRepoBlob, getRepoBranches, getRepoDefaultBranch, getRepoLanguages, getRepoLog, getRepoTags, getRepoTree } from '../../lib/api/repos';import { Avatar, ErrorState, PlaceholderAvatar, buttonStyles, cardStyles } from '../../components/common';import { CloneDropdown, CodeView, FileRow, MarkdownBlock, OverviewFileRow, ReadmeCard, RepoTreeSkeleton } from '../../components/repo';import { CloneDropdown, CodeView, FileRow, MarkdownBlock, OverviewFileRow, ReadmeCard, RepoBlobSkeleton, RepoLanguageBarSkeleton, RepoTreeSkeleton } from '../../components/repo';import { RepoFrame, useRepoQuery } from './shared';import { blobHref, commitHref, commitsHref, countLines, decodeRoutePath, formatBytes, formatLanguagePercent, formatRelativeTime, getErrorMessage, getParentPath, imageLike, isDirectory, joinPath, languageColor, markdownLike, safeDecode, sortedTreeEntries, svgLike, treeHref, videoLike } from '../../lib/repo-utils';import { LOADING_DELAY_MS, hasNamedRef, normalizeLanguages, resolveDefaultBranchName, resolveRouteRefAndPath, shouldAnimateNavigation, useDelayedLoading } from './code-helpers';
103 unmodified linesExpand all// );
const RepoLanguageBar: Component<{ languages: Array<{ name: string; percentage: number; color?: string }>; loading?: boolean;}> = (props) => ( <Show when={props.languages.length > 0}> <Show when={props.languages.length > 0} fallback={<Show when={props.loading}><RepoLanguageBarSkeleton /></Show>}> <details class="group -my-4 -m-6 mb-4"> <summary class="untangled-language-bar"> <For each={props.languages}> {(language) => {101 unmodified linesExpand all }; });
return ( <RepoFrame active="code"> <RepoFrame active="code" loadingFallback={<RepoTreeSkeleton nested={Boolean(path())} />}> <Switch> <Match when={codeQuery.isLoading}> <RepoTreeSkeleton /> <RepoTreeSkeleton nested={Boolean(path())} /> </Match> <Match when={codeQuery.error}> <div class={cardStyles('p-6')}> <ErrorState message={getErrorMessage(codeQuery.error)} />273 unmodified linesExpand all ); const overviewReady = createMemo(() => Boolean(repoQuery.data && treeQuery.data && branchesQuery.data && tagsQuery.data && logQuery.data), ); const languagesLoading = createMemo(() => !languagesQuery.data && (languagesQuery.isLoading || languagesQuery.isFetching)); const showOverviewSkeleton = useDelayedLoading(() => !overviewReady() && !overviewError());
createEffect(() => { if (!treeQuery.isFetching) setPendingTreeHref(undefined);32 unmodified lines }); };
return ( <RepoFrame active="code"> <RepoFrame active="code" loadingFallback={<RepoTreeSkeleton nested={Boolean(routePath())} />}> <Switch> <Match when={!overviewReady() && !overviewError() && showOverviewSkeleton()}> <RepoTreeSkeleton /> <RepoTreeSkeleton nested={Boolean(path())} /> </Match> <Match when={overviewError()}> <div class={cardStyles('p-6')}> <ErrorState message={getErrorMessage(overviewError())} />19 unmodified lines
return ( <> <section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white"> <RepoLanguageBar languages={languages} /> <RepoLanguageBar languages={languages} loading={languagesLoading()} />
<div class="flex items-center justify-between gap-4 pb-5"> <div class="flex items-center gap-2"> <select267 unmodified linesExpand all setShowRendered(Boolean(blob && (markdownLike(path(), blob.mimeType) || svgLike(path(), blob.mimeType)))); });
return ( <RepoFrame active="code"> <RepoFrame active="code" loadingFallback={<RepoBlobSkeleton />}> <Switch> <Match when={blobQuery.isLoading && repoQuery.data}> <LoadingFilePath repo={repoQuery.data!} refName={ref()} path={path()} /> </Match>143 unmodified linesExpand all501 unmodified linesExpand all502503504505506506507508509510511512513514515516517518203 unmodified linesExpand all72272372472571872672772872973019 unmodified lines501 unmodified linesExpand all return data.commits.length === COMMITS_PAGE_LIMIT; });
return ( <RepoFrame active="code"> <RepoFrame active="code" loadingFallback={ <section id="commit-table" class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white overflow-x-auto"> <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">commits</h2> <CommitListSkeleton /> </section> } > <section id="commit-table" class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white overflow-x-auto"> <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">commits</h2> <Switch> <Match when={logQuery.isLoading && !logQuery.data}>203 unmodified linesExpand all const message = createMemo(() => splitCommitMessage(commit()?.message ?? '')); const patch = createMemo(() => renderUnifiedDiff(commitQuery.data?.diff));
return ( <RepoFrame active="code" fullWidth> <RepoFrame active="code" fullWidth loadingFallback={<CommitDetailSkeleton />}> <Switch> <Match when={commitQuery.isLoading}> <CommitDetailSkeleton /> </Match>19 unmodified lines8 unmodified lines910111213131415161764 unmodified lines82838485868687888990147 unmodified linesExpand all238239240241242242243244245246174 unmodified linesExpand all421422423424425425426427428429251 unmodified linesExpand all8 unmodified linesimport { parseAtUri } from '../../lib/api/records';import type { RepoContext } from '../../lib/api/repos';import { useAuth } from '../../lib/auth';import { Avatar, ErrorState, PaginationControls, StateBadge, ToggleButton, buttonStyles, cardStyles, inputStyles, textareaStyles } from '../../components/common';import { AtUriPanel, MarkdownBlock, RepoListSkeleton, RepoThreadSkeleton } from '../../components/repo';import { AtUriPanel, MarkdownBlock, RepoFormSkeleton, RepoListPageSkeleton, RepoListSkeleton, RepoThreadSkeleton } from '../../components/repo';import { RepoFrame, issueQueryKey, issuesQueryKey, useRepoQuery } from './shared';import { REPO_LIST_PAGE_LIMIT, formatRelativeTime, getErrorMessage, issueHref, parseIntegerSearchParam, uniqueCommenters } from '../../lib/repo-utils';import { buildIssueCommentThreads, buildIssueFilterQuery, parseIssueFilter } from './issues-helpers';
64 unmodified lines }); const paginated = createMemo(() => issuesQuery.data?.items ?? []);
return ( <RepoFrame active="issues"> <RepoFrame active="issues" loadingFallback={<RepoListPageSkeleton kind="issues" showCreate={Boolean(auth.agent())} />}> <div class="rounded bg-white p-4 dark:bg-gray-800"> <div class="untangled-filter-grid"> <div class="flex items-stretch rounded border border-gray-300 dark:border-gray-700"> <ToggleButton147 unmodified linesExpand all } };
return ( <RepoFrame active="issues"> <RepoFrame active="issues" loadingFallback={<RepoFormSkeleton titleWidth="w-36" />}> <div class={cardStyles('p-6')}> <form onSubmit={submit} class="flex flex-col gap-4"> <h1 class="text-2xl font-bold m-0">new issue</h1> <input value={title()} onInput={(event) => setTitle(event.currentTarget.value)} placeholder="title" class={inputStyles()} />174 unmodified linesExpand all } };
return ( <RepoFrame active="issues"> <RepoFrame active="issues" loadingFallback={<RepoThreadSkeleton kind="issue" />}> <Switch> <Match when={issueQuery.isLoading}> <RepoThreadSkeleton kind="issue" /> </Match>251 unmodified linesExpand all22 unmodified lines2324252627272829303164 unmodified lines96979899100100101102103104253 unmodified linesExpand all358359360361362362363364365366605 unmodified linesExpand all972973974975976976977978979980183 unmodified linesExpand all22 unmodified linesimport { parseAtUri } from '../../lib/api/records';import { compareBranches, getRepoBranches, type RepoContext } from '../../lib/api/repos';import { useAuth } from '../../lib/auth';import { Avatar, ErrorState, LoadingState, PaginationControls, StateBadge, ToggleButton, buttonStyles, cardStyles, textareaStyles } from '../../components/common';import { AtUriPanel, BranchPill, CommentCard, DiffView, MarkdownBlock, PullDiffSkeleton, PullDiffView, RepoListSkeleton, RepoThreadSkeleton } from '../../components/repo';import { AtUriPanel, BranchPill, CommentCard, DiffView, MarkdownBlock, PullComposeSkeleton, PullDiffSkeleton, PullDiffView, RepoListPageSkeleton, RepoListSkeleton, RepoThreadSkeleton } from '../../components/repo';import { RepoFrame, pullQueryKey, pullsQueryKey, useRepoQuery } from './shared';import { REPO_LIST_PAGE_LIMIT, formatRelativeTime, getErrorMessage, parseIntegerSearchParam, pullHref, uniqueCommenters } from '../../lib/repo-utils';import { buildPullFilterQuery, parsePastedPatchPrefill, parsePullFilter, type PullSourceMode } from './pulls-helpers';
64 unmodified lines }); const paginated = createMemo(() => pullsQuery.data?.items ?? []);
return ( <RepoFrame active="pulls"> <RepoFrame active="pulls" loadingFallback={<RepoListPageSkeleton kind="pulls" showCreate={Boolean(auth.agent())} />}> <div class="rounded bg-white p-4 dark:bg-gray-800"> <div class="untangled-filter-grid"> <div class="flex items-stretch rounded border border-gray-300 dark:border-gray-700"> <ToggleButton253 unmodified linesExpand all } };
return ( <RepoFrame active="pulls"> <RepoFrame active="pulls" loadingFallback={<PullComposeSkeleton />}> <div id="pr-compose-host" class="flex flex-col bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white"> <form onSubmit={submit} class="flex flex-col gap-6"> <section class="untangled-new-pr-step"> <div class="untangled-new-pr-step-line untangled-new-pr-step-line-after" />605 unmodified linesExpand all }; });
return ( <RepoFrame active="pulls"> <RepoFrame active="pulls" loadingFallback={<RepoThreadSkeleton kind="pull" />}> <Switch> <Match when={pullQuery.isLoading}> <RepoThreadSkeleton kind="pull" /> </Match>183 unmodified linesExpand all53 unmodified lines545556575859606162134 unmodified linesExpand all197198199200200201202203204205152 unmodified linesExpand all3583593603613623633643653663673683693703713723733748 unmodified lines53 unmodified linesexport const RepoFrame: Component<{ active: 'code' | 'issues' | 'pulls'; children: JSX.Element; fullWidth?: boolean; loadingFallback?: JSX.Element;}> = (props) => { const auth = useAuth(); const live = useLiveEvents(); const repoQuery = useRepoQuery();134 unmodified linesExpand all return ( <Switch> <Match when={repoQuery.isLoading}> <div class={props.fullWidth ? 'untangled-repo-frame-full' : undefined}> <RepoFrameSkeleton active={props.active} /> <RepoFrameSkeleton active={props.active}>{props.loadingFallback}</RepoFrameSkeleton> </div> </Match> <Match when={repoQuery.error}> <div class={cardStyles('p-6')}>152 unmodified linesExpand all href={`/${repo().owner.handle}/${repo().slug}/issues`} icon={<CircleDot class="size-4" />} label="issues" meta={issueCountQuery.data === undefined ? undefined : String(issueCountQuery.data)} reserveMeta /> <RepoTabLink active={props.active === 'pulls'} href={`/${repo().owner.handle}/${repo().slug}/pulls`} icon={<GitPullRequest class="size-4" />} label="pulls" meta={pullCountQuery.data === undefined ? undefined : String(pullCountQuery.data)} reserveMeta /> </div> </nav>
8 unmodified lines