Merge branch '589-white-screen-when-opening-the-clone-creation-page' into 'dle-4-0'

fix(ui):  "white screen” when opening the clone creation page

See merge request postgres-ai/database-lab!966

Author: agneum

ui/packages/ce/src/api/snapshots/getBranchSnapshots.ts

@@ -6,12 +6,21 @@
  */
 
 import { request } from 'helpers/request'
+import {
+  SnapshotDto,
+  formatSnapshotDto,
+} from '@postgres.ai/shared/types/api/entities/snapshot'
+import { GetBranchSnapshots } from '@postgres.ai/shared/types/api/endpoints/getBranchSnapshots'
 
-export const getBranchSnapshots = async (branch: string) => {
+export const getBranchSnapshots: GetBranchSnapshots = async (
+  branch: string,
+) => {
   const response = await request(`/branch/snapshots/${branch}`)
 
   return {
-    response: response.ok ? await response.json() : null,
+    response: response.ok
+      ? ((await response.json()) as SnapshotDto[]).map(formatSnapshotDto)
+      : null,
     error: response.ok ? null : response,
   }
 }

ui/packages/shared/pages/CreateClone/index.tsx

@@ -49,6 +49,7 @@ export const CreateClone = observer((props: Props) => {
   const timer = useTimer()
   const [branchesList, setBranchesList] = useState<string[]>([])
   const [snapshots, setSnapshots] = useState([] as Snapshot[])
+  const [isLoadingSnapshots, setIsLoadingSnapshots] = useState(false)
 
   // Form.
   const onSubmit = async (values: FormValues) => {
@@ -94,6 +95,7 @@ export const CreateClone = observer((props: Props) => {
 
   const fetchData = async () => {
     try {
+      setIsLoadingSnapshots(true)
       await stores.main.load(props.instanceId)
 
       const branches = (await stores.main.getBranches()) ?? []
@@ -105,12 +107,15 @@ export const CreateClone = observer((props: Props) => {
         await fetchBranchSnapshotsData(initiallySelectedBranch)
       } else {
         const allSnapshots = stores.main?.snapshots?.data ?? []
-        setSnapshots(allSnapshots)
+        const sortedSnapshots = allSnapshots.slice().sort(compareSnapshotsDesc)
+        setSnapshots(sortedSnapshots)
         const [firstSnapshot] = allSnapshots ?? []
         formik.setFieldValue('snapshotId', firstSnapshot?.id)
       }
     } catch (error) {
       console.error('Error fetching data:', error)
+    } finally {
+      setIsLoadingSnapshots(false)
     }
   }
 
@@ -136,7 +141,7 @@ export const CreateClone = observer((props: Props) => {
   )
 
   // Initial loading spinner.
-  if (!stores.main.instance)
+  if (!stores.main.instance || isLoadingSnapshots)
     return (
       <>
         {headRendered}
@@ -217,23 +222,20 @@ export const CreateClone = observer((props: Props) => {
               }
               error={Boolean(formik.errors.snapshotId)}
               items={
-                snapshots
-                  .slice()
-                  .sort(compareSnapshotsDesc)
-                  .map((snapshot, i) => {
-                    const isLatest = i === 0
-                    return {
-                      value: snapshot.id,
-                      children: (
-                        <>
-                          {snapshot.dataStateAt}
-                          {isLatest && (
-                            <span className={styles.snapshotTag}>Latest</span>
-                          )}
-                        </>
-                      ),
-                    }
-                  }) ?? []
+                snapshots.map((snapshot, i) => {
+                  const isLatest = i === 0
+                  return {
+                    value: snapshot.id,
+                    children: (
+                      <>
+                        {snapshot.dataStateAt}
+                        {isLatest && (
+                          <span className={styles.snapshotTag}>Latest</span>
+                        )}
+                      </>
+                    ),
+                  }
+                }) ?? []
               }
             />
 

ui/packages/shared/utils/snapshot.ts

@@ -2,7 +2,7 @@ export const compareSnapshotsDesc = (
   a: { dataStateAtDate: Date },
   b: { dataStateAtDate: Date },
 ): number => {
-  const { dataStateAtDate: dateA } = a
-  const { dataStateAtDate: dateB } = b
-  return dateB.getTime() - dateA.getTime()
+  const dataStateAtDateA = a.dataStateAtDate?.getTime() ?? 0
+  const dataStateAtDateB = b.dataStateAtDate?.getTime() ?? 0
+  return dataStateAtDateB - dataStateAtDateA
 }