From 08c4625bbf67261bd438c4f66ff372c506d685df Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Sat, 17 May 2025 00:35:08 +0200
Subject: [PATCH 1/3] fix: prevent css transitions from firing on mount

---
 .../v3/MultiStackOfflaneDropzone.svelte       |  6 +++---
 packages/ui/src/lib/scroll/Scrollbar.svelte   | 10 +++++++---
 .../src/lib/utils/preventTransitionOnMount.ts | 19 +++++++++++++++++++
 packages/ui/src/styles/utility/helpers.css    |  6 +++++-
 4 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/lib/utils/preventTransitionOnMount.ts

diff --git a/apps/desktop/src/components/v3/MultiStackOfflaneDropzone.svelte b/apps/desktop/src/components/v3/MultiStackOfflaneDropzone.svelte
index cf1f05c4b0..8862cc3fdf 100644
--- a/apps/desktop/src/components/v3/MultiStackOfflaneDropzone.svelte
+++ b/apps/desktop/src/components/v3/MultiStackOfflaneDropzone.svelte
@@ -4,6 +4,7 @@
 	import { StackService } from '$lib/stacks/stackService.svelte';
 	import { UiState } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/shared/context';
+	import { preventTransitionOnMount } from '@gitbutler/ui/utils/preventTransitionOnMount';
 
 	interface Props {
 		projectId: string;
@@ -20,14 +21,13 @@
 		{#snippet overlay({ hovered, activated })}
 			<div class="hidden-dropzone__lane" class:activated class:hovered>
 				<div class="hidden-dropzone__content">
-					<div>
+					<div use:preventTransitionOnMount class="hidden-dropzone__svg">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							width="72"
 							height="97"
 							viewBox="0 0 72 97"
 							fill="none"
-							class="hidden-dropzone__svg"
 						>
 							<g class="hidden-dropzone__svg__plus-list">
 								<path
@@ -75,7 +75,7 @@
 						</svg>
 					</div>
 
-					<p class="hidden-dropzone__label text-13 text-body">
+					<p use:preventTransitionOnMount class="hidden-dropzone__label text-13 text-body">
 						Drag and drop files<br />to create a new branch.
 					</p>
 				</div>
diff --git a/packages/ui/src/lib/scroll/Scrollbar.svelte b/packages/ui/src/lib/scroll/Scrollbar.svelte
index ba4fc24265..18175d50b3 100644
--- a/packages/ui/src/lib/scroll/Scrollbar.svelte
+++ b/packages/ui/src/lib/scroll/Scrollbar.svelte
@@ -276,6 +276,7 @@
 	}
 </script>
 
+<!-- {#if mounted} -->
 <div
 	bind:this={track}
 	data-remove-from-draggable
@@ -308,6 +309,8 @@
 	></div>
 </div>
 
+<!-- {/if} -->
+
 <style>
 	.scrollbar-track {
 		position: absolute;
@@ -331,9 +334,6 @@
 		background-color: var(--clr-scale-ntrl-0);
 		opacity: 0;
 		will-change: transform, opacity;
-		transition:
-			opacity 0.2s,
-			transform 0.15s;
 	}
 
 	/* modify vertical scrollbar */
@@ -353,9 +353,13 @@
 	}
 
 	/* MODIFIERS */
+
 	.show-scrollbar {
 		& .scrollbar-thumb {
 			opacity: 0.15;
+			transition:
+				opacity 0.2s,
+				transform 0.15s;
 		}
 	}
 
diff --git a/packages/ui/src/lib/utils/preventTransitionOnMount.ts b/packages/ui/src/lib/utils/preventTransitionOnMount.ts
new file mode 100644
index 0000000000..b868713d5c
--- /dev/null
+++ b/packages/ui/src/lib/utils/preventTransitionOnMount.ts
@@ -0,0 +1,19 @@
+export function preventTransitionOnMount(node: HTMLElement) {
+	// cunstruct class styles
+
+	// run timer to prevent transition on mount
+	function runTimer() {
+		node.classList.add('h-no-transition');
+		setTimeout(() => {
+			node.classList.remove('h-no-transition');
+		}, 100);
+	}
+
+	runTimer();
+
+	return {
+		destroy() {
+			node.classList.remove('h-no-transition');
+		}
+	};
+}
diff --git a/packages/ui/src/styles/utility/helpers.css b/packages/ui/src/styles/utility/helpers.css
index 45be7ad807..2e6b36bac1 100644
--- a/packages/ui/src/styles/utility/helpers.css
+++ b/packages/ui/src/styles/utility/helpers.css
@@ -92,7 +92,6 @@ pre {
 }
 
 /* STICKY HEADER */
-
 .h-sticky-header {
 	position: sticky;
 	z-index: var(--z-lifted);
@@ -113,3 +112,8 @@ pre {
 .h-sticky-header_sticked-bottom {
 	border-top: 1px solid var(--clr-border-2);
 }
+
+/* NO TRANSITION ON MOUNT */
+.h-no-transition {
+	transition: none !important;
+}

From 856b0914d6f97e0889a52fce9cb93af604b4c185 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Sat, 17 May 2025 15:39:08 +0200
Subject: [PATCH 2/3] UI improve: `ReduxResult`

- add `loading` snippet
- combine `pending` and `uninitialized` conditions. Show difference only for labels.
---
 .../desktop/src/components/ReduxResult.svelte | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/components/ReduxResult.svelte b/apps/desktop/src/components/ReduxResult.svelte
index e9bfe30453..807a4e492e 100644
--- a/apps/desktop/src/components/ReduxResult.svelte
+++ b/apps/desktop/src/components/ReduxResult.svelte
@@ -26,6 +26,7 @@
 		result: Result<A> | undefined;
 		projectId: string;
 		children: Snippet<[A, Env<B>]>;
+		loading?: Snippet<[]>;
 		error?: Snippet<[unknown]>;
 		onerror?: (err: unknown) => void;
 	} & (B extends undefined ? { stackId?: B } : { stackId: B });
@@ -77,19 +78,26 @@
 	{#if props.error}
 		{@render props.error(display.result.error)}
 	{/if}
+{:else if display.result?.status === 'pending' || display.result?.status === 'uninitialized'}
+	{#if props.loading}
+		{@render props.loading()}
+	{:else}
+		<div class="text-12 loading-spinner">
+			<Icon name="spinner" />
+			<span>{display.result?.status}</span>
+		</div>
+	{/if}
 {:else if display.result?.data !== undefined}
 	{@render props.children(display.result.data, display.env)}
-{:else if display.result?.status === 'pending'}
-	<div class="loading-spinner">
-		<Icon name="spinner" />
-	</div>
-{:else if display.result?.status === 'uninitialized'}
-	Uninitialized...
 {/if}
 
 <style>
 	.loading-spinner {
+		display: flex;
+		align-items: center;
+		gap: 8px;
 		z-index: var(--z-lifted);
 		position: relative;
+		color: var(--clr-text-2);
 	}
 </style>

From f2fe57cfeb66c5f10724bd0ed2696f8649d6dbc3 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Sat, 17 May 2025 15:42:29 +0200
Subject: [PATCH 3/3] fix: restructure components hierarchy in ReduxResult

In order to prevent content shift if sections are loading data and still empty.
---
 .../src/components/v3/WorkspaceView.svelte    | 49 ++++++++++++-------
 .../src/components/v3/WorktreeChanges.svelte  | 45 ++++++++---------
 2 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/apps/desktop/src/components/v3/WorkspaceView.svelte b/apps/desktop/src/components/v3/WorkspaceView.svelte
index c1519ef6d9..cb8518703d 100644
--- a/apps/desktop/src/components/v3/WorkspaceView.svelte
+++ b/apps/desktop/src/components/v3/WorkspaceView.svelte
@@ -133,31 +133,34 @@
 		{/if}
 	</div>
 
-	<ReduxResult {projectId} result={stacksResult?.current}>
-		{#snippet children(stacks)}
-			<div
-				class="stacks-view-wrap"
-				bind:this={stacksViewEl}
-				style:width={stacksViewWidth.current + 'rem'}
-				use:focusable={{ id: Focusable.WorkspaceRight, parentId: Focusable.Workspace }}
-			>
+	<div
+		class="stacks-view-wrap"
+		bind:this={stacksViewEl}
+		style:width={stacksViewWidth.current + 'rem'}
+		use:focusable={{ id: Focusable.WorkspaceRight, parentId: Focusable.Workspace }}
+	>
+		<ReduxResult {projectId} result={stacksResult?.current}>
+			{#snippet loading()}
+				<div class="stacks-view-skeleton"></div>
+			{/snippet}
+
+			{#snippet children(stacks)}
 				<MultiStackView
 					{projectId}
 					{stacks}
 					selectedId={stackId}
 					active={focusGroup.current !== Focusable.UncommittedChanges}
 				/>
-
-				<Resizer
-					viewport={stacksViewEl}
-					direction="left"
-					minWidth={16}
-					borderRadius="ml"
-					onWidth={(value) => uiState.global.stacksViewWidth.set(value)}
-				/>
-			</div>
-		{/snippet}
-	</ReduxResult>
+			{/snippet}
+		</ReduxResult>
+		<Resizer
+			viewport={stacksViewEl}
+			direction="left"
+			minWidth={16}
+			borderRadius="ml"
+			onWidth={(value) => uiState.global.stacksViewWidth.set(value)}
+		/>
+	</div>
 </div>
 
 <style>
@@ -202,4 +205,12 @@
 		gap: 8px;
 		min-width: 320px;
 	}
+
+	/* SKELETON LOADING */
+	.stacks-view-skeleton {
+		width: 100%;
+		height: 100%;
+		border-radius: var(--radius-ml);
+		border: 1px solid var(--clr-border-2);
+	}
 </style>
diff --git a/apps/desktop/src/components/v3/WorktreeChanges.svelte b/apps/desktop/src/components/v3/WorktreeChanges.svelte
index 3a8b91416e..e2dd970f6c 100644
--- a/apps/desktop/src/components/v3/WorktreeChanges.svelte
+++ b/apps/desktop/src/components/v3/WorktreeChanges.svelte
@@ -119,23 +119,24 @@
 	let listFooterHeight = $state(0);
 </script>
 
-<ReduxResult {stackId} {projectId} result={changesResult.current}>
-	{#snippet children(changes, { stackId, projectId })}
-		<Dropzone handlers={[uncommitDzHandler]} maxHeight>
-			{#snippet overlay({ hovered, activated })}
-				<CardOverlay {hovered} {activated} label="Uncommit changes" />
-			{/snippet}
-			<div
-				class="uncommitted-changes-wrap"
-				use:focusable={{ id: Focusable.UncommittedChanges, parentId: Focusable.WorkspaceLeft }}
-			>
-				<ScrollableContainer
-					autoScroll={false}
-					padding={{
-						top: listHeaderHeight,
-						bottom: listFooterHeight
-					}}
-				>
+<Dropzone handlers={[uncommitDzHandler]} maxHeight>
+	{#snippet overlay({ hovered, activated })}
+		<CardOverlay {hovered} {activated} label="Uncommit changes" />
+	{/snippet}
+
+	<div
+		class="uncommitted-changes-wrap"
+		use:focusable={{ id: Focusable.UncommittedChanges, parentId: Focusable.WorkspaceLeft }}
+	>
+		<ScrollableContainer
+			autoScroll={false}
+			padding={{
+				top: listHeaderHeight,
+				bottom: listFooterHeight
+			}}
+		>
+			<ReduxResult {stackId} {projectId} result={changesResult.current}>
+				{#snippet children(changes, { stackId, projectId })}
 					<div
 						data-testid={TestId.UncommittedChanges_Header}
 						use:stickyHeader
@@ -202,11 +203,11 @@
 							<WorktreeTipsFooter />
 						</div>
 					{/if}
-				</ScrollableContainer>
-			</div>
-		</Dropzone>
-	{/snippet}
-</ReduxResult>
+				{/snippet}
+			</ReduxResult>
+		</ScrollableContainer>
+	</div>
+</Dropzone>
 
 <style>
 	.uncommitted-changes-wrap {