From 0f3ffe53adfddb9b9198fb635979c3189156f74a Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Tue, 18 Feb 2025 16:37:00 -0500
Subject: [PATCH] add shimmer text

---
 .../overview/platforms/createAndroid.svelte        | 14 ++++++++++++--
 .../overview/platforms/createApple.svelte          | 14 ++++++++++++--
 .../overview/platforms/createFlutter.svelte        | 14 ++++++++++++--
 .../overview/platforms/createReactNative.svelte    | 14 ++++++++++++--
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
index 99bde4591..86e1dc0a4 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createAndroid.svelte
@@ -3,7 +3,15 @@
     import { invalidate } from '$app/navigation';
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
-    import { Code, Layout, Icon, Typography, Fieldset, InlineCode } from '@appwrite.io/pink-svelte';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        ShimmerText
+    } from '@appwrite.io/pink-svelte';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { IconAndroid, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
     import { Card } from '$lib/components';
@@ -203,7 +211,9 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                         gap="l">
                         {#if !connectionSuccessful}
                             <Typography.Text variant="m-400"
-                                >Waiting for connection...</Typography.Text>
+                                ><ShimmerText --font-family="Inter"
+                                    >Waiting for connection...</ShimmerText
+                                ></Typography.Text>
                         {:else}
                             <!-- cannot apply fade on components -->
                             <div
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
index 2370f0c52..3da1612f3 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createApple.svelte
@@ -3,7 +3,15 @@
     import { invalidate } from '$app/navigation';
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
-    import { Code, Layout, Icon, Typography, Fieldset, InlineCode } from '@appwrite.io/pink-svelte';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        ShimmerText
+    } from '@appwrite.io/pink-svelte';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { IconApple, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
     import { Card } from '$lib/components';
@@ -228,7 +236,9 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
                         gap="l">
                         {#if !connectionSuccessful}
                             <Typography.Text variant="m-400"
-                                >Waiting for connection...</Typography.Text>
+                                ><ShimmerText --font-family="Inter"
+                                    >Waiting for connection...</ShimmerText
+                                ></Typography.Text>
                         {:else}
                             <!-- cannot apply fade on components -->
                             <div
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
index 5180b6adc..d2b777bbf 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createFlutter.svelte
@@ -3,7 +3,15 @@
     import { invalidate } from '$app/navigation';
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
-    import { Code, Layout, Icon, Typography, Fieldset, InlineCode } from '@appwrite.io/pink-svelte';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        ShimmerText
+    } from '@appwrite.io/pink-svelte';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { IconFlutter, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
     import { Card } from '$lib/components';
@@ -286,7 +294,9 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
                         gap="l">
                         {#if !connectionSuccessful}
                             <Typography.Text variant="m-400"
-                                >Waiting for connection...</Typography.Text>
+                                ><ShimmerText --font-family="Inter"
+                                    >Waiting for connection...</ShimmerText
+                                ></Typography.Text>
                         {:else}
                             <!-- cannot apply fade on components -->
                             <div
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
index 46f273c89..635433017 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte
@@ -3,7 +3,15 @@
     import { invalidate } from '$app/navigation';
     import { createPlatform } from './wizard/store';
     import { Dependencies } from '$lib/constants';
-    import { Code, Layout, Icon, Typography, Fieldset, InlineCode } from '@appwrite.io/pink-svelte';
+    import {
+        Code,
+        Layout,
+        Icon,
+        Typography,
+        Fieldset,
+        InlineCode,
+        ShimmerText
+    } from '@appwrite.io/pink-svelte';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { IconReact, IconAppwrite } from '@appwrite.io/pink-icons-svelte';
     import { Card } from '$lib/components';
@@ -252,7 +260,9 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
                         gap="l">
                         {#if !connectionSuccessful}
                             <Typography.Text variant="m-400"
-                                >Waiting for connection...</Typography.Text>
+                                ><ShimmerText --font-family="Inter"
+                                    >Waiting for connection...</ShimmerText
+                                ></Typography.Text>
                         {:else}
                             <!-- cannot apply fade on components -->
                             <div