fix: time display logic.

Author: ItzNotABug

src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Card, SvgIcon } from '$lib/components';
-    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
     import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
     import type { Models, Runtime } from '@appwrite.io/console';
 
@@ -10,6 +10,7 @@
     export let rootDir: string = undefined;
     export let showGitData = true;
     export let runtimes: Models.RuntimeList;
+    export let loading = false;
 
     $: selectedRuntime = runtimes?.runtimes.find((r) => r.$id === runtime);
 </script>
@@ -18,7 +19,7 @@
     <Layout.Stack gap="xl">
         <slot />
         <Layout.Stack gap="l">
-            {#if selectedRuntime?.name}
+            {#if selectedRuntime?.name && !loading}
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Runtime</Typography.Caption>
                     <Layout.Stack gap="xxs" alignItems="center" direction="row">
@@ -30,6 +31,11 @@
                         </Typography.Text>
                     </Layout.Stack>
                 </Layout.Stack>
+            {:else if loading}
+                <Layout.Stack gap="xs">
+                    <Skeleton variant="line" width={100} height={16} />
+                    <Skeleton variant="line" width="100%" height={20} />
+                </Layout.Stack>
             {/if}
             {#if showGitData}
                 {#if repositoryName}

src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte

@@ -7,7 +7,7 @@
     import { organization } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
-    import { Fieldset, Icon, Input, Layout, Tag } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Icon, Input, Layout, Skeleton, Tag } from '@appwrite.io/pink-svelte';
     import type { ComponentType } from 'svelte';
 
     export let name: string;
@@ -25,6 +25,7 @@
         value: string;
         label: string;
     }[] = [];
+    export let loading = false;
 
     let showCustomId = false;
 </script>
@@ -51,13 +52,20 @@
             {/if}
         </Layout.Stack>
         {#key runtime}
-            <InputSelect
-                id="runtime"
-                label="Runtime"
-                placeholder="Select runtime"
-                bind:value={runtime}
-                required
-                {options} />
+            {#if loading}
+                <Layout.Stack gap="xs">
+                    <Skeleton variant="line" width={100} height={20} />
+                    <Skeleton variant="line" width="100%" height={32} />
+                </Layout.Stack>
+            {:else}
+                <InputSelect
+                    id="runtime"
+                    label="Runtime"
+                    placeholder="Select runtime"
+                    bind:value={runtime}
+                    required
+                    {options} />
+            {/if}
         {/key}
 
         {#if isCloud}
@@ -79,12 +87,19 @@
             </Layout.Stack>
         {/if}
         {#if showEntrypoint}
-            <InputText
-                label="Entrypoint"
-                id="entrypoint"
-                bind:value={entrypoint}
-                required
-                placeholder="Enter entrypoint" />
+            {#if loading}
+                <Layout.Stack gap="xs">
+                    <Skeleton variant="line" width={100} height={20} />
+                    <Skeleton variant="line" width="100%" height={32} />
+                </Layout.Stack>
+            {:else}
+                <InputText
+                    label="Entrypoint"
+                    id="entrypoint"
+                    bind:value={entrypoint}
+                    required
+                    placeholder="Enter entrypoint" />
+            {/if}
         {/if}
     </Layout.Stack>
 </Fieldset>

src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte

@@ -10,7 +10,7 @@
     import { installation, repository } from '$lib/stores/vcs';
     import { Layout } from '@appwrite.io/pink-svelte';
     import { writable } from 'svelte/store';
-    import { ID, Runtime, VCSDeploymentType } from '@appwrite.io/console';
+    import { ID, Runtime, VCSDeploymentType, VCSDetectionType } from '@appwrite.io/console';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import Details from '../(components)/details.svelte';
@@ -57,12 +57,40 @@
     let silentMode = false;
     let specification = specificationOptions[0].value;
 
+    let detectingRuntime = true;
+
     onMount(async () => {
         installation.set(data.installation);
         repository.set(data.repository);
         name = data.repository.name;
+
+        await detectRuntime();
     });
 
+    async function detectRuntime() {
+        try {
+            detectingRuntime = true;
+
+            const detections = (await sdk
+                .forProject(page.params.regionn, page.params.project)
+                .vcs.createRepositoryDetection(
+                    data.installation.$id,
+                    page.params.repository,
+                    VCSDetectionType.Runtime
+                )) as unknown as Models.DetectionRuntime; /* SDK return type is wrong atm */
+
+            entrypoint = detections.entrypoint;
+            buildCommand = detections.commands;
+            runtime = detections.runtime as Runtime;
+
+            trackEvent(Submit.FrameworkDetect, { runtime, source: 'repository' });
+        } catch (error) {
+            trackError(error, Submit.FrameworkDetect);
+        } finally {
+            detectingRuntime = false;
+        }
+    }
+
     async function create() {
         try {
             const func = await sdk
@@ -154,7 +182,8 @@
                 bind:specification
                 {specificationOptions}
                 options={runtimeOptions}
-                showEntrypoint />
+                showEntrypoint
+                loading={detectingRuntime} />
 
             <ProductionBranchFieldset
                 bind:branch
@@ -173,7 +202,8 @@
             runtimes={data.runtimesList}
             repositoryName={data.repository.name}
             {branch}
-            {rootDir} />
+            {rootDir}
+            loading={detectingRuntime} />
     </svelte:fragment>
 
     <svelte:fragment slot="footer">

src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts

@@ -3,17 +3,17 @@ import { sdk } from '$lib/stores/sdk';
 export const load = async ({ parent, params, url }) => {
     const { installations, runtimesList, specificationsList } = await parent();
 
-    const [repository] = await Promise.all([
-        sdk
-            .forProject(params.region, params.project)
-            .vcs.getRepository(url.searchParams.get('installation'), params.repository)
-    ]);
+    const repository = await sdk
+        .forProject(params.region, params.project)
+        .vcs.getRepository(url.searchParams.get('installation'), params.repository);
+
+    const installation = installations.installations.find(
+        (installation) => installation.$id === url.searchParams.get('installation')
+    );
 
     return {
+        installation,
         installations,
-        installation: installations.installations.find(
-            (installation) => installation.$id === url.searchParams.get('installation')
-        ),
         repository,
         runtimesList,
         specificationsList