Skip to content

Commit bb950d7

Browse files
HarshMN2345HarshMN2345
committed
Remove {#await} block that bypassed debouncing and clean up optional chaining
1 parent e1210bb commit bb950d7

File tree

1 file changed

+101
-121
lines changed

1 file changed

+101
-121
lines changed

‎src/lib/components/git/repositories.svelte

Lines changed: 101 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
});
7373
7474
onDestroy(() => {
75-
debouncedLoadRepositories.cancel?.();
75+
debouncedLoadRepositories.cancel();
7676
});
7777
7878
async function loadInstallations() {
@@ -175,7 +175,7 @@
175175
installationsMap.find((entry) => entry.$id === selectedInstallation)
176176
);
177177

178-
debouncedLoadRepositories.cancel?.();
178+
debouncedLoadRepositories.cancel();
179179
}}
180180
bind:value={selectedInstallation} />
181181
<InputSearch
@@ -189,130 +189,110 @@
189189
<!-- manual installation change -->
190190
{#if isLoadingRepositories}
191191
<SkeletonRepoList />
192-
{:else}
193-
{#await loadRepositories(selectedInstallation, search)}
194-
<SkeletonRepoList />
195-
{:then response}
196-
{#if response?.length}
197-
<Paginator items={response} hideFooter={response?.length <= 6} limit={6}>
198-
{#snippet children(
199-
paginatedItems: Models.ProviderRepositoryRuntime[] &
200-
Models.ProviderRepositoryFramework[]
201-
)}
202-
<Table.Root columns={1} let:root>
203-
{#each paginatedItems as repo}
204-
<Table.Row.Base {root}>
205-
<Table.Cell {root}>
192+
{:else if $repositories?.repositories?.length}
193+
<Paginator
194+
items={$repositories.repositories}
195+
hideFooter={$repositories.repositories?.length <= 6}
196+
limit={6}>
197+
{#snippet children(
198+
paginatedItems: Models.ProviderRepositoryRuntime[] &
199+
Models.ProviderRepositoryFramework[]
200+
)}
201+
<Table.Root columns={1} let:root>
202+
{#each paginatedItems as repo}
203+
<Table.Row.Base {root}>
204+
<Table.Cell {root}>
205+
<Layout.Stack direction="row" alignItems="center" gap="s">
206+
{#if action === 'select'}
207+
<input
208+
class="is-small u-margin-inline-end-8"
209+
type="radio"
210+
name="repositories"
211+
bind:group={selectedRepository}
212+
onchange={() => repository.set(repo)}
213+
value={repo.id} />
214+
{/if}
215+
{#if product === 'sites'}
216+
{#if repo?.framework && repo.framework !== 'other'}
217+
<Avatar size="xs" alt={repo.name}>
218+
<SvgIcon
219+
name={getFrameworkIcon(repo.framework)}
220+
iconSize="small" />
221+
</Avatar>
222+
{:else}
223+
<Avatar size="xs" alt={repo.name} empty />
224+
{/if}
225+
{:else}
226+
{@const iconName = repo?.runtime
227+
? repo.runtime.split('-')[0]
228+
: undefined}
229+
<Avatar size="xs" alt={repo.name} empty={!iconName}>
230+
<SvgIcon name={iconName} iconSize="small" />
231+
</Avatar>
232+
{/if}
233+
<Layout.Stack
234+
gap="s"
235+
direction="row"
236+
alignItems="center"
237+
justifyContent="space-between">
206238
<Layout.Stack
207239
direction="row"
208-
alignItems="center"
209-
gap="s">
210-
{#if action === 'select'}
211-
<input
212-
class="is-small u-margin-inline-end-8"
213-
type="radio"
214-
name="repositories"
215-
bind:group={selectedRepository}
216-
onchange={() => repository.set(repo)}
217-
value={repo.id} />
218-
{/if}
219-
{#if product === 'sites'}
220-
{#if repo?.framework && repo.framework !== 'other'}
221-
<Avatar size="xs" alt={repo.name}>
222-
<SvgIcon
223-
name={getFrameworkIcon(
224-
repo.framework
225-
)}
226-
iconSize="small" />
227-
</Avatar>
228-
{:else}
229-
<Avatar
230-
size="xs"
231-
alt={repo.name}
232-
empty />
233-
{/if}
234-
{:else}
235-
{@const iconName = repo?.runtime
236-
? repo.runtime.split('-')[0]
237-
: undefined}
238-
<Avatar
239-
size="xs"
240-
alt={repo.name}
241-
empty={!iconName}>
242-
<SvgIcon
243-
name={iconName}
244-
iconSize="small" />
245-
</Avatar>
240+
gap="s"
241+
alignItems="center">
242+
<Typography.Text
243+
truncate
244+
color="--fgcolor-neutral-secondary">
245+
{repo.name}
246+
</Typography.Text>
247+
{#if repo.private}
248+
<Icon
249+
size="s"
250+
icon={IconLockClosed}
251+
color="--fgcolor-neutral-tertiary" />
246252
{/if}
247-
<Layout.Stack
248-
gap="s"
249-
direction="row"
250-
alignItems="center"
251-
justifyContent="space-between">
252-
<Layout.Stack
253-
direction="row"
254-
gap="s"
255-
alignItems="center">
256-
<Typography.Text
253+
{#if !$isSmallViewport}
254+
<time datetime={repo.pushedAt}>
255+
<Typography.Caption
256+
variant="400"
257257
truncate
258-
color="--fgcolor-neutral-secondary">
259-
{repo.name}
260-
</Typography.Text>
261-
{#if repo.private}
262-
<Icon
263-
size="s"
264-
icon={IconLockClosed}
265-
color="--fgcolor-neutral-tertiary" />
266-
{/if}
267-
{#if !$isSmallViewport}
268-
<time datetime={repo.pushedAt}>
269-
<Typography.Caption
270-
variant="400"
271-
truncate
272-
color="--fgcolor-neutral-tertiary">
273-
{timeFromNow(repo.pushedAt)}
274-
</Typography.Caption>
275-
</time>
276-
{/if}
277-
</Layout.Stack>
278-
{#if action === 'button'}
279-
<PinkButton.Button
280-
size="xs"
281-
variant="secondary"
282-
on:click={() => connect(repo)}>
283-
Connect
284-
</PinkButton.Button>
285-
{/if}
286-
</Layout.Stack>
258+
color="--fgcolor-neutral-tertiary">
259+
{timeFromNow(repo.pushedAt)}
260+
</Typography.Caption>
261+
</time>
262+
{/if}
287263
</Layout.Stack>
288-
</Table.Cell>
289-
</Table.Row.Base>
290-
{/each}
291-
</Table.Root>
292-
{/snippet}
293-
</Paginator>
294-
{:else if search}
295-
<EmptySearch hidePages hidePagination bind:search target="repositories">
296-
<svelte:fragment slot="actions">
297-
{#if search}
298-
<Button secondary on:click={() => (search = '')}>
299-
Clear search
300-
</Button>
301-
{/if}
302-
</svelte:fragment>
303-
</EmptySearch>
304-
{:else}
305-
<Card>
306-
<Layout.Stack alignItems="center" justifyContent="center">
307-
<Typography.Text
308-
variation="m-500"
309-
color="--fgcolor-neutral-tertiary">
310-
No repositories available
311-
</Typography.Text>
312-
</Layout.Stack>
313-
</Card>
314-
{/if}
315-
{/await}
264+
{#if action === 'button'}
265+
<PinkButton.Button
266+
size="xs"
267+
variant="secondary"
268+
on:click={() => connect(repo)}>
269+
Connect
270+
</PinkButton.Button>
271+
{/if}
272+
</Layout.Stack>
273+
</Layout.Stack>
274+
</Table.Cell>
275+
</Table.Row.Base>
276+
{/each}
277+
</Table.Root>
278+
{/snippet}
279+
</Paginator>
280+
{:else if search}
281+
<EmptySearch hidePages hidePagination bind:search target="repositories">
282+
<svelte:fragment slot="actions">
283+
{#if search}
284+
<Button secondary on:click={() => (search = '')}>Clear search</Button>
285+
{/if}
286+
</svelte:fragment>
287+
</EmptySearch>
288+
{:else}
289+
<Card>
290+
<Layout.Stack alignItems="center" justifyContent="center">
291+
<Typography.Text variation="m-500" color="--fgcolor-neutral-tertiary">
292+
No repositories available
293+
</Typography.Text>
294+
</Layout.Stack>
295+
</Card>
316296
{/if}
317297
{/if}
318298
</Layout.Stack>

0 commit comments

Comments
 (0)