From 4931923e1c9f58c0da0eebad49f11cfb9c45d30a Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 24 May 2022 16:22:43 +0800
Subject: [PATCH] feat(console): add integration guide for vue sdk

---
 .../docs/tutorial/integrate-sdk/vue.mdx       | 196 ++++++++++++++++++
 .../docs/tutorial/integrate-sdk/vue_zh-cn.mdx | 196 ++++++++++++++++++
 .../console/src/assets/images/congrats.svg    |  33 +++
 .../components/GuideModal/index.module.scss   |   2 +-
 .../components/GuideModal/index.tsx           |  15 +-
 .../LibrarySelector/index.module.scss         |   5 +
 .../components/LibrarySelector/index.tsx      |   4 +-
 .../StepsSkeleton/index.module.scss           |  40 ++++
 .../components/StepsSkeleton/index.tsx        |  20 ++
 9 files changed, 503 insertions(+), 8 deletions(-)
 create mode 100644 packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
 create mode 100644 packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
 create mode 100644 packages/console/src/assets/images/congrats.svg
 create mode 100644 packages/console/src/pages/Applications/components/StepsSkeleton/index.module.scss
 create mode 100644 packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx

diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
new file mode 100644
index 000000000..867a43bb9
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
@@ -0,0 +1,196 @@
+import MultiTextInputField from '@mdx/components/MultiTextInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+<Step
+  title="Install SDK"
+  subtitle="Please select your favorite package manager"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(1)}
+>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/vue
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/vue
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/vue
+```
+
+</TabItem>
+<TabItem value="script" label="script">
+
+{/* This should be CDN URL */}
+```html
+<script src="https://logto.io/js/logto-sdk-vue/0.1.0/logto-sdk-vue.production.js" />
+```
+
+</TabItem>
+</Tabs>
+</Step>
+
+<Step
+  title="Initiate LogtoClient"
+  subtitle="1 step"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(2)}
+>
+
+`import` and use `createLogto` to install Logto plugin:
+
+```ts
+import { createLogto, LogtoConfig } from '@logto/vue';
+
+const config: LogtoConfig = {
+  appId: '<your-application-id>',
+  endpoint: '<your-logto-endpoint>'
+};
+
+const app = createApp(App);
+
+app.use(createLogto, config);
+app.mount("#app");
+```
+
+</Step>
+
+<Step
+  title="Sign In"
+  subtitle="2 steps"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(3)}
+>
+
+We provide two composables `useHandleSignInCallback()` and `useLogto()` which can help you easily manage the authentication flow. 
+
+### Set Up Callback Route
+
+In order to handle what comes from Logto, the application needs to have a dedicated callback route that does NOT require authentication.
+
+First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`
+
+<MultiTextInputField name="redirectUris" title="Redirect URI" onError={() => props.onError(2)} />
+
+Then let's create a callback component:
+
+```html
+<script setup lang="ts">
+  import { useHandleSignInCallback } from "@logto/vue";
+  const { isLoading } = useHandleSignInCallback();
+</script>
+
+<template>
+  <!-- When it's working in progress -->
+  <p v-if="isLoading">Redirecting...</p>
+</template>
+```
+
+Next, we need to link the callback component with the route. Let's say the path is `/callback` and we are using `vue-router`:
+
+```ts
+const router = createRouter({
+  routes: [
+    {
+      path: "/callback",
+      name: "callback",
+      component: CallbackView,
+    },
+  ]
+});
+```
+
+### Make a Sign In Button
+
+```ts
+import { useLogto } from "@logto/vue";
+
+const { signIn } = useLogto();
+const onClickSignIn = () => signIn(redirectUrl);
+```
+
+```html
+<button @click="onClickSignIn">Sign In</button>
+```
+
+### Retrieve Authentication Status
+
+```ts
+import { useLogto } from '@logto/vue';
+
+const { isAuthenticated } = useLogto();
+```
+
+```html
+<div v-if="!isAuthenticated">
+  <!-- E.g. navigate to the sign in page -->
+</div>
+<div v-else>
+  <!-- Do things when user is authenticated -->
+</div>
+```
+
+</Step>
+
+<Step
+  title="Sign Out"
+  subtitle="1 step"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(4)}
+>
+
+Calling `.signOut()` will clear all the Logto data in memory and LocalStorage, if there is any.
+
+To make the user come back to your application after signing out,
+it's necessary to add `http://localhost:1234` as one of the Post Sign Out URIs and use the URL as the parameter when calling `.signOut()`.
+
+<MultiTextInputField name="postLogoutRedirectUris" title="Post sign out redirect URI" onError={() => props.onError(3)} />
+
+```ts
+import { useLogto } from "@logto/vue";
+
+const { signOut } = useLogto();
+const onClickSignOut = () => signOut('http://localhost:1234');
+```
+
+```html
+<button @click="onClickSignOut">Sign Out</button>
+```
+
+</Step>
+
+<Step
+  title="Further Readings"
+  subtitle="3 steps"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  buttonText="general.done"
+  buttonHtmlType="submit"
+>
+
+- [SDK Documentation](https://link-url-here.org)
+- [OIDC Documentation](https://link-url-here.org)
+- [Calling API to fetch accessToken](https://link-url-here.org)
+
+</Step>
diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
new file mode 100644
index 000000000..cbd66f2bc
--- /dev/null
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
@@ -0,0 +1,196 @@
+import MultiTextInputField from '@mdx/components/MultiTextInputField';
+import Step from '@mdx/components/Step';
+import Tabs from '@mdx/components/Tabs';
+import TabItem from '@mdx/components/TabItem';
+
+<Step
+  title="安装 SDK"
+  subtitle="请选择你喜欢的包管理工具"
+  index={0}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(1)}
+>
+<Tabs>
+<TabItem value="npm" label="npm">
+
+```bash
+npm i @logto/vue
+```
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @logto/vue
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @logto/vue
+```
+
+</TabItem>
+<TabItem value="script" label="script">
+
+{/* This should be CDN URL */}
+```html
+<script src="https://logto.io/js/logto-sdk-vue/0.1.0/logto-sdk-vue.production.js" />
+```
+
+</TabItem>
+</Tabs>
+</Step>
+
+<Step
+  title="初始化 LogtoClient"
+  subtitle="1 step"
+  index={1}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(2)}
+>
+
+`import` 并使用 `createLogto` 以插件的形式安装 Logto:
+
+```ts
+import { createLogto, LogtoConfig } from '@logto/vue';
+
+const config: LogtoConfig = {
+  appId: '<your-application-id>',
+  endpoint: '<your-logto-endpoint>'
+};
+
+const app = createApp(App);
+
+app.use(createLogto, config);
+app.mount("#app");
+```
+
+</Step>
+
+<Step
+  title="Sign In"
+  subtitle="2 steps"
+  index={2}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(3)}
+>
+
+我们提供了两个组合式 API `useHandleSignInCallback()` 和 `useLogto()`，它们可以帮助你轻松完成登录认证流程。 
+
+### 设置回调路由
+
+为了让登录认证流程能够正常工作，我们需要设置一个回调路由，以便在认证结束后跳转回你的应用时它能够处理认证结果。（请注意：此路由地址不能受登录保护）
+
+但首先, 让我们先在下方输入 redirect URI，如：`http://localhost:1234/callback`
+
+<MultiTextInputField name="redirectUris" title="Redirect URI" onError={() => props.onError(2)} />
+
+然后，让我们来创建一个 CallbackView 组件：
+
+```html
+<script setup lang="ts">
+  import { useHandleSignInCallback } from "@logto/vue";
+  const { isLoading } = useHandleSignInCallback();
+</script>
+
+<template>
+  <!-- 当登录认证尚未完成时 -->
+  <p v-if="isLoading">页面跳转中...</p>
+</template>
+```
+
+接下来，我们就可以在路由表中添加这个回调路由。假设我们的路由地址定义为 `/callback`，且使用的路由工具为 `vue-router`:
+
+```ts
+const router = createRouter({
+  ...
+  routes: [
+    {
+      path: "/callback",
+      name: "callback",
+      component: CallbackView,
+    },
+  ]
+});
+```
+
+### 创建一个登录按钮
+
+```ts
+import { useLogto } from "@logto/vue";
+
+const { signIn } = useLogto();
+const onClickSignIn = () => signIn(redirectUrl);
+```
+
+```html
+<button @click="onClickSignIn">登录</button>
+```
+
+### 判断当前登录状态
+
+```ts
+import { useLogto } from '@logto/vue';
+
+const { isAuthenticated } = useLogto();
+```
+
+```html
+<div v-if="!isAuthenticated">
+  <!-- 跳转到登录页面 -->
+</div>
+<div v-else>
+  <!-- 实现用户登录之后的业务逻辑 -->
+</div>
+```
+
+</Step>
+
+<Step
+  title="Sign Out"
+  subtitle="1 step"
+  index={3}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  onNext={() => props.onNext(4)}
+>
+
+调用 `.signOut()` 方法会清除所有在缓存或者 localStorage 中的 Logto 数据（如果有）。
+
+为了确保用户登出后能够跳转回你的应用，我们需要首先在管理界面中将 `http://localhost:1234` 添加到允许登出后跳转的地址列表（Post Sign Out URIs）中。
+
+<MultiTextInputField name="postLogoutRedirectUris" title="Post sign out redirect URI" onError={() => props.onError(3)} />
+
+```ts
+import { useLogto } from "@logto/vue";
+
+const { signOut } = useLogto();
+const onClickSignOut = () => signOut('http://localhost:1234');
+```
+
+```html
+<button @click="onClickSignOut">登出</button>
+```
+
+</Step>
+
+<Step
+  title="延伸阅读"
+  subtitle="3 steps"
+  index={4}
+  activeIndex={props.activeStepIndex}
+  invalidIndex={props.invalidStepIndex}
+  buttonText="general.done"
+  buttonHtmlType="submit"
+>
+
+- [SDK Documentation](https://link-url-here.org)
+- [OIDC Documentation](https://link-url-here.org)
+- [Calling API to fetch accessToken](https://link-url-here.org)
+
+</Step>
diff --git a/packages/console/src/assets/images/congrats.svg b/packages/console/src/assets/images/congrats.svg
new file mode 100644
index 000000000..2f282cda9
--- /dev/null
+++ b/packages/console/src/assets/images/congrats.svg
@@ -0,0 +1,33 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80 130C107.614 130 130 107.614 130 80C130 52.3858 107.614 30 80 30C52.3858 30 30 52.3858 30 80C30 107.614 52.3858 130 80 130ZM80 105C93.8071 105 105 93.8071 105 80C105 66.1929 93.8071 55 80 55C66.1929 55 55 66.1929 55 80C55 93.8071 66.1929 105 80 105Z" fill="#EFF1F1"/>
+<path d="M44.5752 51.3872L46.9058 48.7286C48.193 47.2603 48.0462 45.0266 46.5779 43.7394V43.7394C45.1096 42.4522 44.9628 40.2185 46.25 38.7502V38.7502C47.5372 37.2819 47.3904 35.0481 45.9221 33.7609V33.7609C44.4538 32.4737 44.3069 30.24 45.5941 28.7717L47.9248 26.1131" stroke="#83DA85" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="55.625" y="27.5977" width="10" height="10" transform="rotate(-30.6488 55.625 27.5977)" fill="#FAABFF"/>
+<rect x="135.671" y="45.3599" width="5" height="5" transform="rotate(35.5802 135.671 45.3599)" fill="#FAABFF"/>
+<rect x="88.75" y="80" width="15" height="15" fill="#FAABFF"/>
+<path d="M75.3662 36.2506C75.3301 36.1826 75.3812 36.101 75.4581 36.1038L86.6516 36.5023C86.7285 36.505 86.7737 36.59 86.7328 36.6553L80.7909 46.1499C80.7501 46.2151 80.6539 46.2117 80.6178 46.1437L75.3662 36.2506Z" fill="#68BE6C"/>
+<path d="M107.673 76.9575C107.644 76.8619 107.729 76.7704 107.827 76.7928L122.008 80.0457C122.106 80.068 122.142 80.1875 122.074 80.2608L112.166 90.916C112.098 90.9893 111.976 90.9613 111.947 90.8657L107.673 76.9575Z" fill="#68BE6C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.4142 53.9586C65.4142 53.8434 65.5076 53.75 65.6229 53.75H69.3778C69.4931 53.75 69.5865 53.8434 69.5865 53.9586V60.5671L75.3095 57.2629C75.4093 57.2053 75.5369 57.2394 75.5945 57.3392L77.472 60.5911C77.5296 60.6909 77.4954 60.8185 77.3956 60.8761L71.6722 64.1805L77.3953 67.4848C77.4951 67.5424 77.5293 67.67 77.4717 67.7697L75.5942 71.0216C75.5366 71.1214 75.409 71.1556 75.3092 71.098L69.5865 67.794V74.4024C69.5865 74.5176 69.4931 74.611 69.3778 74.611H65.6229C65.5076 74.611 65.4142 74.5176 65.4142 74.4024V67.7935L59.6907 71.098C59.591 71.1556 59.4634 71.1214 59.4058 71.0216L57.5283 67.7697C57.4707 67.67 57.5049 67.5424 57.6046 67.4848L63.3278 64.1805L57.6043 60.8761C57.5046 60.8185 57.4704 60.6909 57.528 60.5911L59.4055 57.3392C59.4631 57.2394 59.5907 57.2053 59.6904 57.2629L65.4142 60.5675V53.9586Z" fill="#7958FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.1248 77.7496C101.752 77.7496 107.125 72.3771 107.125 65.7498C107.125 59.1225 101.752 53.75 95.1248 53.75C88.4975 53.75 83.125 59.1225 83.125 65.7498C83.125 72.3771 88.4975 77.7496 95.1248 77.7496ZM95.1248 71.7495C98.4385 71.7495 101.125 69.0633 101.125 65.7497C101.125 62.436 98.4385 59.7498 95.1248 59.7498C91.8112 59.7498 89.1249 62.436 89.1249 65.7497C89.1249 69.0633 91.8112 71.7495 95.1248 71.7495Z" fill="#FFB95A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 40C27.7614 40 30 37.7614 30 35C30 32.2386 27.7614 30 25 30C22.2386 30 20 32.2386 20 35C20 37.7614 22.2386 40 25 40ZM25 37.5C26.3807 37.5 27.5 36.3807 27.5 35C27.5 33.6193 26.3807 32.5 25 32.5C23.6193 32.5 22.5 33.6193 22.5 35C22.5 36.3807 23.6193 37.5 25 37.5Z" fill="#FFB95A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M136.25 25.625C137.631 25.625 138.75 24.5057 138.75 23.125C138.75 21.7443 137.631 20.625 136.25 20.625C134.869 20.625 133.75 21.7443 133.75 23.125C133.75 24.5057 134.869 25.625 136.25 25.625ZM136.25 24.375C136.94 24.375 137.5 23.8154 137.5 23.125C137.5 22.4346 136.94 21.875 136.25 21.875C135.56 21.875 135 22.4346 135 23.125C135 23.8154 135.56 24.375 136.25 24.375Z" fill="#FFDDB5"/>
+<path d="M79.1225 30C84.0051 30 88.7242 30.6998 93.185 32.0047C104.552 35.3297 114.242 42.5831 120.685 52.1957M117.386 112.188C116.283 113.497 115.115 114.748 113.886 115.938C112.669 117.115 111.392 118.232 110.06 119.282C107.812 121.055 105.408 122.639 102.873 124.01C99.8206 125.661 96.5775 127.003 93.185 127.995C88.7242 129.3 84.0051 130 79.1225 130C67.4416 130 56.6962 125.994 48.185 119.282C38.9101 111.967 32.2883 101.438 30 89.375M38.2097 51.25C36.4188 53.794 34.859 56.5125 33.5612 59.375C32.2965 62.1644 31.2804 65.0905 30.5412 68.125" stroke="#E6DEFF" stroke-width="1.25"/>
+<path d="M43.2706 136.487C43.0672 138.619 45.4644 140.003 47.2093 138.761L105.631 97.1659C107.114 96.1102 107.008 93.8744 105.431 92.9642L53.8204 63.1667C52.244 62.2566 50.2546 63.2823 50.0817 65.0943L43.2706 136.487Z" fill="url(#paint0_linear_3293_164131)"/>
+<mask id="mask0_3293_164131" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="43" y="62" width="64" height="78">
+<path d="M43.2706 136.487C43.0672 138.619 45.4644 140.003 47.2093 138.761L105.631 97.1659C107.114 96.1102 107.008 93.8744 105.431 92.9642L53.8204 63.1667C52.244 62.2566 50.2546 63.2823 50.0817 65.0943L43.2706 136.487Z" fill="#AF9EFF"/>
+</mask>
+<g mask="url(#mask0_3293_164131)">
+<rect x="35.7844" y="77.3428" width="80" height="10" rx="0.8" fill="#F07EFF"/>
+<rect x="23.2844" y="98.9932" width="80" height="10" rx="0.8" fill="#F07EFF"/>
+<rect x="10.7844" y="120.644" width="80" height="10" rx="0.8" fill="#F07EFF"/>
+</g>
+<path d="M103.159 37.9014L105.851 35.6092C107.337 34.3433 107.516 32.1118 106.25 30.6252V30.6252C104.984 29.1385 105.163 26.9071 106.65 25.6412L109.342 23.349" stroke="#C4C7C7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M105.625 51.5132L109.131 51.9669C111.068 52.2175 112.841 50.8508 113.091 48.9143V48.9143C113.342 46.9778 115.115 45.6111 117.051 45.8617V45.8617C118.988 46.1123 120.761 44.7456 121.011 42.8091V42.8091C121.262 40.8726 123.035 39.5059 124.971 39.7565L128.478 40.2102" stroke="#AF9EFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M76.366 21.0161L75.513 17.585C75.042 15.6901 76.1963 13.772 78.0912 13.301V13.301C79.9862 12.8299 81.1405 10.9119 80.6694 9.01693L79.8165 5.58582" stroke="#E6DEFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M118.769 71.3066L121.26 68.7973C122.635 67.4114 124.874 67.4029 126.26 68.7785V68.7785C127.645 70.154 129.884 70.1455 131.26 68.7596L133.75 66.2503" stroke="#E6DEFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_3293_164131" x1="42.1876" y1="139.688" x2="108.156" y2="96.9709" gradientUnits="userSpaceOnUse">
+<stop stop-color="#492EF3"/>
+<stop offset="1" stop-color="#CF69FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/console/src/pages/Applications/components/GuideModal/index.module.scss b/packages/console/src/pages/Applications/components/GuideModal/index.module.scss
index 423330558..35edeefba 100644
--- a/packages/console/src/pages/Applications/components/GuideModal/index.module.scss
+++ b/packages/console/src/pages/Applications/components/GuideModal/index.module.scss
@@ -3,7 +3,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  background-color: var(--color-surface-1);
+  background-color: var(--color-base);
   height: 100vh;
 
   .header {
diff --git a/packages/console/src/pages/Applications/components/GuideModal/index.tsx b/packages/console/src/pages/Applications/components/GuideModal/index.tsx
index 0114e7dcb..ea1a06ddb 100644
--- a/packages/console/src/pages/Applications/components/GuideModal/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideModal/index.tsx
@@ -17,6 +17,7 @@ import { SupportedJavascriptLibraries } from '@/types/applications';
 import { GuideForm } from '@/types/guide';
 
 import LibrarySelector from '../LibrarySelector';
+import StepsSkeleton from '../StepsSkeleton';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -28,7 +29,9 @@ type Props = {
 
 const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Element>> = {
   react: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react.mdx')),
+  vue: lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue.mdx')),
   'react_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx')),
+  'vue_zh-cn': lazy(async () => import('@/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx')),
 };
 
 const onClickFetchSampleProject = (projectName: string) => {
@@ -37,13 +40,15 @@ const onClickFetchSampleProject = (projectName: string) => {
 };
 
 const GuideModal = ({ appName, isOpen, onClose, onComplete }: Props) => {
-  const [subtype, setSubtype] = useState<string>(SupportedJavascriptLibraries.React);
+  const [subtype, setSubtype] = useState<SupportedJavascriptLibraries>(
+    SupportedJavascriptLibraries.React
+  );
   const [activeStepIndex, setActiveStepIndex] = useState(-1);
   const [invalidStepIndex, setInvalidStepIndex] = useState(-1);
 
   const locale = i18next.language;
-  const guideKey = `${subtype}_${locale}`.toLowerCase();
-  const GuideComponent = Guides[guideKey] ?? Guides[subtype];
+  const guideI18nKey = `${subtype}_${locale}`.toLowerCase();
+  const GuideComponent = Guides[guideI18nKey] ?? Guides[subtype];
 
   const methods = useForm<GuideForm>({ mode: 'onSubmit', reValidateMode: 'onChange' });
   const {
@@ -84,7 +89,7 @@ const GuideModal = ({ appName, isOpen, onClose, onComplete }: Props) => {
         <div className={styles.content}>
           <FormProvider {...methods}>
             <form onSubmit={onSubmit}>
-              {cloneElement(<LibrarySelector />, {
+              {cloneElement(<LibrarySelector libraryName={subtype} />, {
                 className: styles.banner,
                 onChange: setSubtype,
                 onToggle: () => {
@@ -100,7 +105,7 @@ const GuideModal = ({ appName, isOpen, onClose, onComplete }: Props) => {
                   },
                 }}
               >
-                <Suspense fallback={<div>Loading...</div>}>
+                <Suspense fallback={<StepsSkeleton />}>
                   {GuideComponent && (
                     <GuideComponent
                       activeStepIndex={activeStepIndex}
diff --git a/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss b/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
index 2d848273a..9b0dd74b1 100644
--- a/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
+++ b/packages/console/src/pages/Applications/components/LibrarySelector/index.module.scss
@@ -6,6 +6,11 @@
   flex-direction: column;
   scroll-margin: _.unit(5);
 
+  img {
+    display: block;
+    margin: _.unit(1) auto _.unit(8);
+  }
+
   .title {
     font: var(--font-title-large);
   }
diff --git a/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx b/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
index aa4d78c40..45289e9f5 100644
--- a/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
+++ b/packages/console/src/pages/Applications/components/LibrarySelector/index.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import highFive from '@/assets/images/high-five.svg';
+import congrats from '@/assets/images/congrats.svg';
 import tada from '@/assets/images/tada.svg';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
@@ -30,7 +30,7 @@ const LibrarySelector = ({
   const librarySelector = useMemo(
     () => (
       <Card className={classNames(styles.card, className)}>
-        <img src={highFive} alt="success" />
+        <img src={congrats} alt="success" />
         <div>
           <div className={styles.title}>{t('applications.guide.title')}</div>
           <div className={styles.subtitle}>{t('applications.guide.subtitle')}</div>
diff --git a/packages/console/src/pages/Applications/components/StepsSkeleton/index.module.scss b/packages/console/src/pages/Applications/components/StepsSkeleton/index.module.scss
new file mode 100644
index 000000000..ca2252314
--- /dev/null
+++ b/packages/console/src/pages/Applications/components/StepsSkeleton/index.module.scss
@@ -0,0 +1,40 @@
+@use '@/scss/underscore' as _;
+
+.step {
+  display: flex;
+  align-items: center;
+  padding: _.unit(5) _.unit(6);
+  border-radius: 16px;
+  background-color: var(--color-layer-1);
+
+  .index {
+    @include _.shimmering-animation;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    margin-right: _.unit(4);
+  }
+
+  .wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      @include _.shimmering-animation;
+      width: 140px;
+      height: 24px;
+    }
+
+    .subtitle {
+      @include _.shimmering-animation;
+      width: 400px;
+      height: 20px;
+      margin-top: _.unit(1);
+    }
+  }
+}
+
+.step + .step {
+  margin-top: _.unit(6);
+}
diff --git a/packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx b/packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx
new file mode 100644
index 000000000..accb090df
--- /dev/null
+++ b/packages/console/src/pages/Applications/components/StepsSkeleton/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const StepsSkeleton = () => (
+  <>
+    {Array.from({ length: 5 }).map((_, stepIndex) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <div key={stepIndex} className={styles.step}>
+        <div className={styles.index} />
+        <div className={styles.wrapper}>
+          <div className={styles.title} />
+          <div className={styles.subtitle} />
+        </div>
+      </div>
+    ))}
+  </>
+);
+
+export default StepsSkeleton;