From ba0c7d56833fc1d16a70ef163798fee3a6f1c668 Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Mon, 8 Jan 2024 18:11:47 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20loading=20indicato?=
 =?UTF-8?q?rs=20for=20initial=20loads=20of=20resources=20(#2074)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 Add loading indicators for initial loads of resources

* refactor: 💡 Use HDS application state component

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12025
---
 addons/core/addon/styles/addon.scss           |  27 +
 addons/core/translations/states/en-us.yaml    |   3 +
 ui/desktop/app/routes/application.js          |  12 -
 .../scopes/scope/projects/sessions/index.js   |  15 +
 .../scopes/scope/projects/targets/index.js    |  15 +
 ui/desktop/app/styles/app.scss                |  27 -
 .../scopes/scope/projects/sessions.hbs        |  14 +-
 .../scopes/scope/projects/sessions/index.hbs  | 360 ++++++------
 .../scope/projects/sessions/loading.hbs       |   9 +
 .../scopes/scope/projects/targets.hbs         |  14 +-
 .../scopes/scope/projects/targets/index.hbs   | 526 +++++++++---------
 .../scopes/scope/projects/targets/loading.hbs |   9 +
 12 files changed, 532 insertions(+), 499 deletions(-)
 create mode 100644 ui/desktop/app/templates/scopes/scope/projects/sessions/loading.hbs
 create mode 100644 ui/desktop/app/templates/scopes/scope/projects/targets/loading.hbs

diff --git a/addons/core/addon/styles/addon.scss b/addons/core/addon/styles/addon.scss
index 445b3444f..1d0a09eb3 100644
--- a/addons/core/addon/styles/addon.scss
+++ b/addons/core/addon/styles/addon.scss
@@ -20,3 +20,30 @@
     }
   }
 }
+
+// Search & Filtering
+.search-filtering {
+  .hds-application-state {
+    margin-top: 3rem;
+  }
+
+  .hds-segmented-group {
+    margin-bottom: 1rem;
+
+    .hds-dropdown-toggle-button__text {
+      white-space: nowrap;
+    }
+  }
+
+  .hds-table {
+    margin-bottom: 1rem;
+  }
+}
+
+// Flyout with table
+.flyout-with-table {
+  .copyable-content a,
+  button {
+    color: var(--token-color-foreground-primary);
+  }
+}
diff --git a/addons/core/translations/states/en-us.yaml b/addons/core/translations/states/en-us.yaml
index 94875ceb9..dad826358 100644
--- a/addons/core/translations/states/en-us.yaml
+++ b/addons/core/translations/states/en-us.yaml
@@ -14,3 +14,6 @@ active-public: Public
 recording: Recording
 completed: Completed
 failed: Failed
+loading:
+  title: Loading all items...
+  description: All of your {resource} are still loading. Please wait while we finish loading everything on screen.
diff --git a/ui/desktop/app/routes/application.js b/ui/desktop/app/routes/application.js
index a59714532..8a17576f8 100644
--- a/ui/desktop/app/routes/application.js
+++ b/ui/desktop/app/routes/application.js
@@ -8,7 +8,6 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { A } from '@ember/array';
 import { getOwner } from '@ember/application';
-import { loading } from 'ember-loading';
 
 export default class ApplicationRoute extends Route {
   // =services
@@ -78,17 +77,6 @@ export default class ApplicationRoute extends Route {
     this.invalidateSession();
   }
 
-  /**
-   * Hooks into ember-loading to kick off loading indicator in the
-   * application template.
-   * @return {boolean} always returns true
-   */
-  @action
-  @loading
-  loading() {
-    return true;
-  }
-
   /**
    * Invalidates the session if a 401 error occurs and returns false to
    * prevent further error handling.
diff --git a/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js b/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js
index 1886f0c3e..8d9ff7283 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/sessions/index.js
@@ -5,6 +5,7 @@
 
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class ScopesScopeProjectsSessionsIndexRoute extends Route {
   // =services
@@ -40,6 +41,20 @@ export default class ScopesScopeProjectsSessionsIndexRoute extends Route {
 
   // =methods
 
+  /**
+   * Event to determine whether the loading template should be shown.
+   * Only show the loading template during initial loads or when transitioning
+   * from different routes. Don't show it when a user is just searching or
+   * filtering on the same page as it can be jarring.
+   * @param transition
+   * @returns {boolean}
+   */
+  @action
+  loading(transition) {
+    const from = transition.from?.name;
+    return from !== 'scopes.scope.projects.sessions.index';
+  }
+
   /**
    * Loads queried sessions, the total number of sessions, all sessions,
    * all targets and all projects for filtering options for the current user.
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
index a906f422f..90fb82518 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
@@ -9,6 +9,7 @@ import {
   STATUS_SESSION_ACTIVE,
   STATUS_SESSION_PENDING,
 } from 'api/models/session';
+import { action } from '@ember/object';
 
 export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
   // =services
@@ -51,6 +52,20 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
 
   // =methods
 
+  /**
+   * Event to determine whether the loading template should be shown.
+   * Only show the loading template during initial loads or when transitioning
+   * from different routes. Don't show it when a user is just searching or
+   * filtering on the same page as it can be jarring.
+   * @param transition
+   * @returns {boolean}
+   */
+  @action
+  loading(transition) {
+    const from = transition.from?.name;
+    return from !== 'scopes.scope.projects.targets.index';
+  }
+
   /**
    * If arriving here unauthenticated, redirect to index for further processing.
    */
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 5bf35697a..ae411bc9e 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -684,30 +684,3 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     color: var(--token-color-foreground-faint);
   }
 }
-
-// Search & Filtering
-.search-filtering {
-  .hds-application-state {
-    margin-top: 3rem;
-  }
-
-  .hds-segmented-group {
-    margin-bottom: 1rem;
-
-    .hds-dropdown-toggle-button__text {
-      white-space: nowrap;
-    }
-  }
-
-  .hds-table {
-    margin-bottom: 1rem;
-  }
-}
-
-// Flyout with table
-.flyout-with-table {
-  .copyable-content a,
-  button {
-    color: var(--token-color-foreground-primary);
-  }
-}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions.hbs
index cf4c3866c..ecbe61520 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions.hbs
@@ -3,4 +3,16 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-{{outlet}}
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+  <page.header>
+    <h2>
+      {{t 'resources.session.title_plural'}}
+      <DocLink @doc='sessions' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.session.description'}}</p>
+  </page.header>
+
+  <page.body class='search-filtering'>
+    {{outlet}}
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index 488b89c5f..ca1ae794a 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -3,191 +3,175 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Rose::Layout::Page as |page|>
-
-  <page.header>
-    <h2>
-      {{t 'resources.session.title_plural'}}
-      <DocLink @doc='sessions' @iconSize='large' />
-    </h2>
-    <p>{{t 'resources.session.description'}}</p>
-  </page.header>
-
-  <page.body class='search-filtering'>
-    {{#if (or @model.sessions @model.allSessions)}}
-      <Hds::SegmentedGroup as |S|>
-        <S.Generic>
-          <Dropdown
-            @name={{t 'resources.target.title'}}
-            @itemOptions={{this.availableTargets}}
-            @checkedItems={{this.targets}}
-            @applyFilter={{fn this.applyFilter 'targets'}}
-            @isSearchable={{true}}
-            @listPosition='bottom-left'
-          />
-        </S.Generic>
-        <S.Generic>
-          <Dropdown
-            @name={{t 'form.status.label'}}
-            @itemOptions={{this.sessionStatusOptions}}
-            @checkedItems={{this.status}}
-            @applyFilter={{fn this.applyFilter 'status'}}
-          />
-        </S.Generic>
-        <S.Generic>
-          <Dropdown
-            @name={{t 'resources.scope.title'}}
-            @itemOptions={{this.availableScopes}}
-            @checkedItems={{this.scopes}}
-            @applyFilter={{fn this.applyFilter 'scopes'}}
-            @isSearchable={{true}}
-            as |FD selectItem itemOptions|
-          >
-            {{#let (group-by itemOptions 'scopeModel') as |orgs|}}
-              {{#each orgs as |org|}}
-                <FD.Generic>
-                  <FlightIcon @name='org' />
-                  {{org.key.displayName}}
-                </FD.Generic>
-                {{#each org.items as |project|}}
-                  <FD.Checkbox
-                    @value={{project.id}}
-                    checked={{includes project.id this.scopes}}
-                    {{on 'change' selectItem}}
-                  >
-                    {{project.displayName}}
-                  </FD.Checkbox>
-                {{/each}}
-              {{/each}}
-            {{/let}}
-          </Dropdown>
-        </S.Generic>
-      </Hds::SegmentedGroup>
-      <FilterTags @filters={{this.filters}} />
-      {{#if @model.sessions}}
-        <Hds::Table
-          @model={{this.sortedSessions}}
-          @columns={{array
-            (hash label=(t 'form.id.label'))
-            (hash label=(t 'resources.target.title'))
-            (hash label=(t 'form.proxy_url.label'))
-            (hash label=(t 'form.started.label'))
-            (hash label=(t 'form.status.label'))
-            (hash label='')
-          }}
-          @valign='middle'
-        >
-          <:body as |B|>
-            <B.Tr>
-              <B.Td>
-                {{#if B.data.isAvailable}}
-                  <Hds::Badge
-                    @text={{t 'resources.session.title'}}
-                    @icon='entry-point'
-                    @isIconOnly={{true}}
-                    @color='success'
-                  />
-                  <Copyable
-                    @text={{B.data.id}}
-                    @buttonText={{t 'actions.copy-to-clipboard'}}
-                    @acknowledgeText={{t 'states.copied'}}
-                  >
-                    <LinkTo
-                      @route='scopes.scope.projects.sessions.session.index'
-                      @model={{B.data.id}}
-                      data-test-session-detail-link
-                    >
-                      <Hds::Text::Code>{{B.data.id}}</Hds::Text::Code>
-                    </LinkTo>
-                  </Copyable>
-                {{else}}
-                  <Hds::Badge
-                    @text={{t 'resources.session.title'}}
-                    @icon='entry-point'
-                    @isIconOnly={{true}}
-                  />
-                  <Copyable
-                    @text={{B.data.id}}
-                    @buttonText={{t 'actions.copy-to-clipboard'}}
-                    @acknowledgeText={{t 'states.copied'}}
-                  >
-                    <Hds::Text::Code
-                      data-test-session-id-copy
-                    >{{B.data.id}}</Hds::Text::Code>
-                  </Copyable>
-                {{/if}}
-              </B.Td>
-              <B.Td>
-                {{B.data.target.displayName}}
-              </B.Td>
-              {{!
-                Two if's here because:
-                1) Local proxy info is only relevant if the session is
-                    active or pending (aka isAvailable).  Once the session
-                    is canceled or in the process thereof, the local proxy
-                    may no longer be used.
-                2) The session actually has proxy information associated
-                    with it.  It's possible for the user to start sessions
-                    from other devices (or even another tab), in which case we
-                    won't have the local proxy info available here.
-              }}
-              <B.Td>
-                {{#if B.data.isAvailable}}
-                  {{#if B.data.proxy}}
-                    <Copyable
-                      @text={{B.data.proxy}}
-                      @buttonText={{t 'actions.copy-to-clipboard'}}
-                      @acknowledgeText={{t 'states.copied'}}
-                    >
-                      <Hds::Text::Code>{{B.data.proxy}}</Hds::Text::Code>
-                    </Copyable>
-                  {{/if}}
-                {{/if}}
-              </B.Td>
-              <B.Td>
-                <time datetime={{format-date-iso B.data.created_time}}>
-                  {{format-date-iso-human B.data.created_time}}
-                </time>
-              </B.Td>
-              <B.Td>
-                <SessionStatus @model={{B.data}} />
-              </B.Td>
-              <B.Td>
-                {{#if (can 'cancel session' B.data)}}
-                  <Hds::Button
-                    @text={{t 'actions.cancel'}}
-                    @color='secondary'
-                    {{on 'click' (route-action 'cancelSession' B.data)}}
-                    data-test-session-cancel-button
-                  />
-                {{/if}}
-              </B.Td>
-            </B.Tr>
-          </:body>
-        </Hds::Table>
-        <Rose::Pagination
-          @totalItems={{@model.totalItems}}
-          @currentPage={{this.page}}
-          @currentPageSize={{this.pageSize}}
-        />
-      {{else}}
-        <Hds::ApplicationState data-test-no-session-results as |A|>
-          <A.Header @title={{t 'titles.no-results-found'}} />
-          <A.Body
-            @text={{t 'descriptions.no-filter-results' resource='sessions'}}
-          />
-        </Hds::ApplicationState>
-      {{/if}}
-    {{else}}
-      <Hds::ApplicationState data-test-no-sessions as |A|>
-        <A.Header
-          @title={{t 'resources.session.messages.none-friendly.title'}}
-        />
-        <A.Body
-          @text={{t 'resources.session.messages.none-friendly.description'}}
-        />
-      </Hds::ApplicationState>
-    {{/if}}
-  </page.body>
-
-</Rose::Layout::Page>
\ No newline at end of file
+{{#if (or @model.sessions @model.allSessions)}}
+  <Hds::SegmentedGroup as |S|>
+    <S.Generic>
+      <Dropdown
+        @name={{t 'resources.target.title'}}
+        @itemOptions={{this.availableTargets}}
+        @checkedItems={{this.targets}}
+        @applyFilter={{fn this.applyFilter 'targets'}}
+        @isSearchable={{true}}
+        @listPosition='bottom-left'
+      />
+    </S.Generic>
+    <S.Generic>
+      <Dropdown
+        @name={{t 'form.status.label'}}
+        @itemOptions={{this.sessionStatusOptions}}
+        @checkedItems={{this.status}}
+        @applyFilter={{fn this.applyFilter 'status'}}
+      />
+    </S.Generic>
+    <S.Generic>
+      <Dropdown
+        @name={{t 'resources.scope.title'}}
+        @itemOptions={{this.availableScopes}}
+        @checkedItems={{this.scopes}}
+        @applyFilter={{fn this.applyFilter 'scopes'}}
+        @isSearchable={{true}}
+        as |FD selectItem itemOptions|
+      >
+        {{#let (group-by itemOptions 'scopeModel') as |orgs|}}
+          {{#each orgs as |org|}}
+            <FD.Generic>
+              <FlightIcon @name='org' />
+              {{org.key.displayName}}
+            </FD.Generic>
+            {{#each org.items as |project|}}
+              <FD.Checkbox
+                @value={{project.id}}
+                checked={{includes project.id this.scopes}}
+                {{on 'change' selectItem}}
+              >
+                {{project.displayName}}
+              </FD.Checkbox>
+            {{/each}}
+          {{/each}}
+        {{/let}}
+      </Dropdown>
+    </S.Generic>
+  </Hds::SegmentedGroup>
+  <FilterTags @filters={{this.filters}} />
+  {{#if @model.sessions}}
+    <Hds::Table
+      @model={{this.sortedSessions}}
+      @columns={{array
+        (hash label=(t 'form.id.label'))
+        (hash label=(t 'resources.target.title'))
+        (hash label=(t 'form.proxy_url.label'))
+        (hash label=(t 'form.started.label'))
+        (hash label=(t 'form.status.label'))
+        (hash label='')
+      }}
+      @valign='middle'
+    >
+      <:body as |B|>
+        <B.Tr>
+          <B.Td>
+            {{#if B.data.isAvailable}}
+              <Hds::Badge
+                @text={{t 'resources.session.title'}}
+                @icon='entry-point'
+                @isIconOnly={{true}}
+                @color='success'
+              />
+              <Copyable
+                @text={{B.data.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <LinkTo
+                  @route='scopes.scope.projects.sessions.session.index'
+                  @model={{B.data.id}}
+                  data-test-session-detail-link
+                >
+                  <Hds::Text::Code>{{B.data.id}}</Hds::Text::Code>
+                </LinkTo>
+              </Copyable>
+            {{else}}
+              <Hds::Badge
+                @text={{t 'resources.session.title'}}
+                @icon='entry-point'
+                @isIconOnly={{true}}
+              />
+              <Copyable
+                @text={{B.data.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <Hds::Text::Code
+                  data-test-session-id-copy
+                >{{B.data.id}}</Hds::Text::Code>
+              </Copyable>
+            {{/if}}
+          </B.Td>
+          <B.Td>
+            {{B.data.target.displayName}}
+          </B.Td>
+          {{!
+					  Two if's here because:
+					  1) Local proxy info is only relevant if the session is
+						  active or pending (aka isAvailable).  Once the session
+						  is canceled or in the process thereof, the local proxy
+						  may no longer be used.
+					  2) The session actually has proxy information associated
+						  with it.  It's possible for the user to start sessions
+						  from other devices (or even another tab), in which case we
+						  won't have the local proxy info available here.
+					}}
+          <B.Td>
+            {{#if B.data.isAvailable}}
+              {{#if B.data.proxy}}
+                <Copyable
+                  @text={{B.data.proxy}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <Hds::Text::Code>{{B.data.proxy}}</Hds::Text::Code>
+                </Copyable>
+              {{/if}}
+            {{/if}}
+          </B.Td>
+          <B.Td>
+            <time datetime={{format-date-iso B.data.created_time}}>
+              {{format-date-iso-human B.data.created_time}}
+            </time>
+          </B.Td>
+          <B.Td>
+            <SessionStatus @model={{B.data}} />
+          </B.Td>
+          <B.Td>
+            {{#if (can 'cancel session' B.data)}}
+              <Hds::Button
+                @text={{t 'actions.cancel'}}
+                @color='secondary'
+                {{on 'click' (route-action 'cancelSession' B.data)}}
+                data-test-session-cancel-button
+              />
+            {{/if}}
+          </B.Td>
+        </B.Tr>
+      </:body>
+    </Hds::Table>
+    <Rose::Pagination
+      @totalItems={{@model.totalItems}}
+      @currentPage={{this.page}}
+      @currentPageSize={{this.pageSize}}
+    />
+  {{else}}
+    <Hds::ApplicationState data-test-no-session-results as |A|>
+      <A.Header @title={{t 'titles.no-results-found'}} />
+      <A.Body
+        @text={{t 'descriptions.no-filter-results' resource='sessions'}}
+      />
+    </Hds::ApplicationState>
+  {{/if}}
+{{else}}
+  <Hds::ApplicationState data-test-no-sessions as |A|>
+    <A.Header @title={{t 'resources.session.messages.none-friendly.title'}} />
+    <A.Body
+      @text={{t 'resources.session.messages.none-friendly.description'}}
+    />
+  </Hds::ApplicationState>
+{{/if}}
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/loading.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/loading.hbs
new file mode 100644
index 000000000..bf2c7203e
--- /dev/null
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/loading.hbs
@@ -0,0 +1,9 @@
+<Hds::ApplicationState as |A|>
+  <A.Header @title={{t 'states.loading.title'}} @icon='loading' />
+  <A.Body
+    @text={{t
+      'states.loading.description'
+      resource=(t 'resources.session.title_plural')
+    }}
+  />
+</Hds::ApplicationState>
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
index 35b3fcba4..fc3bee4f4 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets.hbs
@@ -5,4 +5,16 @@
 
 {{page-title (t 'resources.target.title_plural')}}
 
-{{outlet}}
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+  <page.header>
+    <h2>
+      {{t 'resources.target.title_plural'}}
+      <DocLink @doc='targets' @iconSize='large' />
+    </h2>
+    <p>{{t 'resources.target.description'}}</p>
+  </page.header>
+
+  <page.body class='search-filtering'>
+    {{outlet}}
+  </page.body>
+</Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
index 4af85f587..e31b96bc6 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
@@ -3,278 +3,264 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Rose::Layout::Page as |page|>
+{{#if this.showFilters}}
+  <Hds::SegmentedGroup as |S|>
+    <S.TextInput
+      @value={{this.search}}
+      @type='search'
+      placeholder={{t 'actions.search'}}
+      aria-label={{t 'actions.search'}}
+      {{on 'input' this.handleSearchInput}}
+    />
+    <S.Generic>
+      <Dropdown
+        @name={{t 'resources.target.titles.active-sessions'}}
+        @itemOptions={{this.availableSessionOptions}}
+        @checkedItems={{this.availableSessions}}
+        @applyFilter={{fn this.applyFilter 'availableSessions'}}
+      />
+    </S.Generic>
+    <S.Generic>
+      <Dropdown
+        @name={{t 'form.type.label'}}
+        @itemOptions={{this.targetTypeOptions}}
+        @checkedItems={{this.types}}
+        @applyFilter={{fn this.applyFilter 'types'}}
+      />
+    </S.Generic>
+    <S.Generic>
+      <Dropdown
+        @name={{t 'resources.scope.title'}}
+        @itemOptions={{this.availableScopes}}
+        @checkedItems={{this.scopes}}
+        @applyFilter={{fn this.applyFilter 'scopes'}}
+        @isSearchable={{true}}
+        as |FD selectItem itemOptions|
+      >
+        {{#let (group-by itemOptions 'scopeModel') as |orgs|}}
+          {{#each orgs as |org|}}
+            <FD.Generic>
+              <FlightIcon @name='org' />
+              {{org.key.displayName}}
+            </FD.Generic>
+            {{#each org.items as |project|}}
+              <FD.Checkbox
+                @value={{project.id}}
+                data-test-checkbox={{project.name}}
+                checked={{includes project.id this.scopes}}
+                {{on 'change' selectItem}}
+              >
+                {{project.displayName}}
+              </FD.Checkbox>
+            {{/each}}
+          {{/each}}
+        {{/let}}
+      </Dropdown>
+    </S.Generic>
+  </Hds::SegmentedGroup>
+  <FilterTags @filters={{this.filters}} />
+  {{#if @model.targets}}
+    <Hds::Table
+      @model={{@model.targets}}
+      @columns={{array
+        (hash label=(t 'form.name.label'))
+        (hash label=(t 'form.id.label'))
+        (hash label=(t 'resources.target.titles.active-sessions'))
+        (hash label=(t 'form.type.label'))
+        (hash label=(t 'resources.project.title'))
+        (hash label='')
+      }}
+      @valign='middle'
+    >
+      <:body as |B|>
+        <B.Tr>
+          <B.Td>
+            <span class='hds-font-weight-semibold'>
+              {{#if (can 'read model' B.data)}}
+                <LinkTo
+                  data-test-visit-target={{B.data.id}}
+                  @route='scopes.scope.projects.targets.target'
+                  @model={{B.data.id}}
+                  @query={{hash isConnecting=false}}
+                >
+                  {{B.data.displayName}}
+                </LinkTo>
+              {{else}}
+                {{B.data.displayName}}
+              {{/if}}
+              {{#if B.data.description}}
+                <p>{{B.data.description}}</p>
+              {{/if}}
+            </span>
+          </B.Td>
+          <B.Td>
+            <Copyable
+              @text={{B.data.id}}
+              @buttonText={{t 'actions.copy-to-clipboard'}}
+              @acknowledgeText={{t 'states.copied'}}
+            >
+              <Hds::Text::Code>{{B.data.id}}</Hds::Text::Code>
+            </Copyable>
+          </B.Td>
+          <B.Td>
+            {{#if B.data.isActive}}
+              <Hds::Button
+                data-test-targets-sessions-flyout-button={{B.data.id}}
+                @text={{t 'actions.yes'}}
+                @color='tertiary'
+                @icon='info'
+                {{on 'click' (fn this.selectTarget B.data)}}
+              />
+            {{/if}}
+          </B.Td>
+          <B.Td>
+            {{#if B.data.type}}
+              <Hds::Badge
+                @text={{t (concat 'resources.target.types.' B.data.type)}}
+              />
+            {{/if}}
+          </B.Td>
+          <B.Td>
+            <div>
+              <Copyable
+                @text={{B.data.project.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <Hds::Text::Code>{{B.data.project.id}}</Hds::Text::Code>
+              </Copyable>
+            </div>
+            {{#if B.data.project.name}}
+              <Hds::Badge @color='neutral' @text={{B.data.project.name}} />
+            {{/if}}
+          </B.Td>
+          <B.Td>
+            {{#if (can 'connect target' B.data)}}
+              {{#if (can 'read target' B.data)}}
+                <Hds::Button
+                  data-test-targets-connect-button={{B.data.id}}
+                  @text={{t 'resources.session.actions.connect'}}
+                  @color='secondary'
+                  @route='scopes.scope.projects.targets.target'
+                  @model={{B.data.id}}
+                  @query={{hash isConnecting=true}}
+                />
+              {{else}}
+                <Hds::Button
+                  data-test-targets-connect-button={{B.data.id}}
+                  @text={{t 'resources.session.actions.connect'}}
+                  @color='secondary'
+                  {{on 'click' (fn this.quickConnect B.data)}}
+                />
+              {{/if}}
+            {{/if}}
+          </B.Td>
+        </B.Tr>
+      </:body>
+    </Hds::Table>
+    <Rose::Pagination
+      @totalItems={{@model.totalItems}}
+      @currentPage={{this.page}}
+      @currentPageSize={{this.pageSize}}
+    />
 
-  <page.header>
-    <h2>
-      {{t 'resources.target.title_plural'}}
-      <DocLink @doc='targets' @iconSize='large' />
-    </h2>
-    <p>{{t 'resources.target.description'}}</p>
-  </page.header>
-
-  <page.body class='search-filtering'>
-    {{#if this.showFilters}}
-      <Hds::SegmentedGroup as |S|>
-        <S.TextInput
-          @value={{this.search}}
-          @type='search'
-          placeholder={{t 'actions.search'}}
-          aria-label={{t 'actions.search'}}
-          {{on 'input' this.handleSearchInput}}
-        />
-        <S.Generic>
-          <Dropdown
-            @name={{t 'resources.target.titles.active-sessions'}}
-            @itemOptions={{this.availableSessionOptions}}
-            @checkedItems={{this.availableSessions}}
-            @applyFilter={{fn this.applyFilter 'availableSessions'}}
-          />
-        </S.Generic>
-        <S.Generic>
-          <Dropdown
-            @name={{t 'form.type.label'}}
-            @itemOptions={{this.targetTypeOptions}}
-            @checkedItems={{this.types}}
-            @applyFilter={{fn this.applyFilter 'types'}}
-          />
-        </S.Generic>
-        <S.Generic>
-          <Dropdown
-            @name={{t 'resources.scope.title'}}
-            @itemOptions={{this.availableScopes}}
-            @checkedItems={{this.scopes}}
-            @applyFilter={{fn this.applyFilter 'scopes'}}
-            @isSearchable={{true}}
-            as |FD selectItem itemOptions|
-          >
-            {{#let (group-by itemOptions 'scopeModel') as |orgs|}}
-              {{#each orgs as |org|}}
-                <FD.Generic>
-                  <FlightIcon @name='org' />
-                  {{org.key.displayName}}
-                </FD.Generic>
-                {{#each org.items as |project|}}
-                  <FD.Checkbox
-                    @value={{project.id}}
-                    data-test-checkbox={{project.name}}
-                    checked={{includes project.id this.scopes}}
-                    {{on 'change' selectItem}}
-                  >
-                    {{project.displayName}}
-                  </FD.Checkbox>
-                {{/each}}
-              {{/each}}
-            {{/let}}
-          </Dropdown>
-        </S.Generic>
-      </Hds::SegmentedGroup>
-      <FilterTags @filters={{this.filters}} />
-      {{#if @model.targets}}
-        <Hds::Table
-          @model={{@model.targets}}
-          @columns={{array
-            (hash label=(t 'form.name.label'))
-            (hash label=(t 'form.id.label'))
-            (hash label=(t 'resources.target.titles.active-sessions'))
-            (hash label=(t 'form.type.label'))
-            (hash label=(t 'resources.project.title'))
-            (hash label='')
-          }}
-          @valign='middle'
-        >
-          <:body as |B|>
-            <B.Tr>
-              <B.Td>
-                <span class='hds-font-weight-semibold'>
-                  {{#if (can 'read model' B.data)}}
-                    <LinkTo
-                      data-test-visit-target={{B.data.id}}
-                      @route='scopes.scope.projects.targets.target'
-                      @model={{B.data.id}}
-                      @query={{hash isConnecting=false}}
-                    >
-                      {{B.data.displayName}}
-                    </LinkTo>
-                  {{else}}
-                    {{B.data.displayName}}
-                  {{/if}}
-                  {{#if B.data.description}}
-                    <p>{{B.data.description}}</p>
-                  {{/if}}
-                </span>
-              </B.Td>
-              <B.Td>
-                <Copyable
-                  @text={{B.data.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
+  {{/if}}
+  {{#if this.noResults}}
+    <Hds::ApplicationState data-test-no-target-results as |A|>
+      <A.Header @title={{t 'titles.no-results-found'}} />
+      <A.Body
+        @text={{t
+          (if
+            this.search
+            'descriptions.no-search-results'
+            'descriptions.no-filter-results'
+          )
+          query=this.search
+          resource='targets'
+        }}
+      />
+    </Hds::ApplicationState>
+  {{/if}}
+{{/if}}
+{{#if this.noTargets}}
+  <Hds::ApplicationState data-test-no-targets as |A|>
+    <A.Header @title={{t 'resources.target.messages.none.title'}} />
+    <A.Body @text={{t 'resources.target.messages.none.description'}} />
+  </Hds::ApplicationState>
+{{/if}}
+{{#if (and this.selectedTarget this.selectedTarget.isActive)}}
+  <Hds::Flyout
+    @onClose={{fn this.selectTarget null}}
+    class='flyout-with-table'
+    data-test-targets-sessions-flyout
+    as |M|
+  >
+    <M.Header>
+      {{t
+        'resources.target.titles.sessions-flyout'
+        targetDisplayName=this.selectedTarget.displayName
+      }}
+    </M.Header>
+    <M.Body>
+      <Hds::Table
+        @model={{this.sortedTargetSessions}}
+        @columns={{array
+          (hash label=(t 'form.id.label'))
+          (hash label=(t 'form.started.label'))
+          (hash label=(t 'form.proxy_url.label'))
+          (hash label='')
+        }}
+        @valign='middle'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              <Copyable
+                @text={{B.data.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <LinkTo
+                  @route='scopes.scope.projects.sessions.session.index'
+                  @model={{B.data.id}}
+                  data-test-targets-session-detail-link={{B.data.id}}
                 >
                   <Hds::Text::Code>{{B.data.id}}</Hds::Text::Code>
-                </Copyable>
-              </B.Td>
-              <B.Td>
-                {{#if B.data.isActive}}
-                  <Hds::Button
-                    data-test-targets-sessions-flyout-button={{B.data.id}}
-                    @text={{t 'actions.yes'}}
-                    @color='tertiary'
-                    @icon='info'
-                    {{on 'click' (fn this.selectTarget B.data)}}
-                  />
-                {{/if}}
-              </B.Td>
-              <B.Td>
-                {{#if B.data.type}}
-                  <Hds::Badge
-                    @text={{t (concat 'resources.target.types.' B.data.type)}}
-                  />
-                {{/if}}
-              </B.Td>
-              <B.Td>
-                <div>
-                  <Copyable
-                    @text={{B.data.project.id}}
-                    @buttonText={{t 'actions.copy-to-clipboard'}}
-                    @acknowledgeText={{t 'states.copied'}}
-                  >
-                    <Hds::Text::Code>{{B.data.project.id}}</Hds::Text::Code>
-                  </Copyable>
-                </div>
-                {{#if B.data.project.name}}
-                  <Hds::Badge @color='neutral' @text={{B.data.project.name}} />
-                {{/if}}
-              </B.Td>
-              <B.Td>
-                {{#if (can 'connect target' B.data)}}
-                  {{#if (can 'read target' B.data)}}
-                    <Hds::Button
-                      data-test-targets-connect-button={{B.data.id}}
-                      @text={{t 'resources.session.actions.connect'}}
-                      @color='secondary'
-                      @route='scopes.scope.projects.targets.target'
-                      @model={{B.data.id}}
-                      @query={{hash isConnecting=true}}
-                    />
-                  {{else}}
-                    <Hds::Button
-                      data-test-targets-connect-button={{B.data.id}}
-                      @text={{t 'resources.session.actions.connect'}}
-                      @color='secondary'
-                      {{on 'click' (fn this.quickConnect B.data)}}
-                    />
-                  {{/if}}
-                {{/if}}
-              </B.Td>
-            </B.Tr>
-          </:body>
-        </Hds::Table>
-        <Rose::Pagination
-          @totalItems={{@model.totalItems}}
-          @currentPage={{this.page}}
-          @currentPageSize={{this.pageSize}}
+                </LinkTo>
+              </Copyable>
+            </B.Td>
+            <B.Td>
+              <time datetime={{format-date-iso B.data.created_time}}>
+                {{format-date-iso-human B.data.created_time}}
+              </time>
+            </B.Td>
+            <B.Td>
+              {{B.data.proxy}}
+            </B.Td>
+            <B.Td>
+              {{#if (can 'cancel session' B.data)}}
+                <Hds::Button
+                  data-test-session-flyout-cancel-button={{B.data.id}}
+                  @text={{t 'resources.session.actions.end'}}
+                  @icon='x'
+                  @isIconOnly={{true}}
+                  @color='secondary'
+                  {{on 'click' (fn this.cancelSession B.data)}}
+                />
+              {{/if}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
+      {{#if this.showFlyoutViewMoreLink}}
+        <Hds::Link::Standalone
+          @text={{t 'resources.target.actions.view-more-sessions'}}
+          @route='scopes.scope.projects.sessions'
+          @query={{this.viewMoreLinkQueryParams}}
+          @icon='arrow-right'
+          @iconPosition='trailing'
         />
-
       {{/if}}
-      {{#if this.noResults}}
-        <Hds::ApplicationState data-test-no-target-results as |A|>
-          <A.Header @title={{t 'titles.no-results-found'}} />
-          <A.Body
-            @text={{t
-              (if
-                this.search
-                'descriptions.no-search-results'
-                'descriptions.no-filter-results'
-              )
-              query=this.search
-              resource='targets'
-            }}
-          />
-        </Hds::ApplicationState>
-      {{/if}}
-    {{/if}}
-    {{#if this.noTargets}}
-      <Hds::ApplicationState data-test-no-targets as |A|>
-        <A.Header @title={{t 'resources.target.messages.none.title'}} />
-        <A.Body @text={{t 'resources.target.messages.none.description'}} />
-      </Hds::ApplicationState>
-    {{/if}}
-    {{#if (and this.selectedTarget this.selectedTarget.isActive)}}
-      <Hds::Flyout
-        @onClose={{fn this.selectTarget null}}
-        class='flyout-with-table'
-        data-test-targets-sessions-flyout
-        as |M|
-      >
-        <M.Header>
-          {{t
-            'resources.target.titles.sessions-flyout'
-            targetDisplayName=this.selectedTarget.displayName
-          }}
-        </M.Header>
-        <M.Body>
-          <Hds::Table
-            @model={{this.sortedTargetSessions}}
-            @columns={{array
-              (hash label=(t 'form.id.label'))
-              (hash label=(t 'form.started.label'))
-              (hash label=(t 'form.proxy_url.label'))
-              (hash label='')
-            }}
-            @valign='middle'
-          >
-            <:body as |B|>
-              <B.Tr>
-                <B.Td>
-                  <Copyable
-                    @text={{B.data.id}}
-                    @buttonText={{t 'actions.copy-to-clipboard'}}
-                    @acknowledgeText={{t 'states.copied'}}
-                  >
-                    <LinkTo
-                      @route='scopes.scope.projects.sessions.session.index'
-                      @model={{B.data.id}}
-                      data-test-targets-session-detail-link={{B.data.id}}
-                    >
-                      <Hds::Text::Code>{{B.data.id}}</Hds::Text::Code>
-                    </LinkTo>
-                  </Copyable>
-                </B.Td>
-                <B.Td>
-                  <time datetime={{format-date-iso B.data.created_time}}>
-                    {{format-date-iso-human B.data.created_time}}
-                  </time>
-                </B.Td>
-                <B.Td>
-                  {{B.data.proxy}}
-                </B.Td>
-                <B.Td>
-                  {{#if (can 'cancel session' B.data)}}
-                    <Hds::Button
-                      data-test-session-flyout-cancel-button={{B.data.id}}
-                      @text={{t 'resources.session.actions.end'}}
-                      @icon='x'
-                      @isIconOnly={{true}}
-                      @color='secondary'
-                      {{on 'click' (fn this.cancelSession B.data)}}
-                    />
-                  {{/if}}
-                </B.Td>
-              </B.Tr>
-            </:body>
-          </Hds::Table>
-          {{#if this.showFlyoutViewMoreLink}}
-            <Hds::Link::Standalone
-              @text={{t 'resources.target.actions.view-more-sessions'}}
-              @route='scopes.scope.projects.sessions'
-              @query={{this.viewMoreLinkQueryParams}}
-              @icon='arrow-right'
-              @iconPosition='trailing'
-            />
-          {{/if}}
-        </M.Body>
-      </Hds::Flyout>
-    {{/if}}
-  </page.body>
-
-</Rose::Layout::Page>
\ No newline at end of file
+    </M.Body>
+  </Hds::Flyout>
+{{/if}}
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/loading.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/loading.hbs
new file mode 100644
index 000000000..9d559f7ae
--- /dev/null
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/loading.hbs
@@ -0,0 +1,9 @@
+<Hds::ApplicationState as |A|>
+  <A.Header @title={{t 'states.loading.title'}} @icon='loading' />
+  <A.Body
+    @text={{t
+      'states.loading.description'
+      resource=(t 'resources.target.title_plural')
+    }}
+  />
+</Hds::ApplicationState>
\ No newline at end of file