From 058905f8431892ffb84ecb59944d196088cba93e Mon Sep 17 00:00:00 2001
From: lucaslyl <lucas.law@cardstack.com>
Date: Thu, 13 Feb 2025 15:39:16 +0800
Subject: [PATCH 1/5] remove activity related data from account

---
 packages/experiments-realm/crm/account.gts | 82 +++++-----------------
 1 file changed, 18 insertions(+), 64 deletions(-)

diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index 8aeeb0cee4..2b12e179fc 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -435,45 +435,15 @@ class IsolatedTemplate extends Component<typeof Account> {
         </SummaryGridContainer>
       </:summary>
 
-      <:activities>
-        <SummaryCard class='activities-summary-card'>
-          <:title>
-            <h2 class='activity-title'>Recent Activities</h2>
-          </:title>
-          <:icon>
-            <BoxelButton
-              @kind='primary'
-              class='activity-button-mobile'
-              data-test-settings-button
-            >
-              <PlusIcon />
-            </BoxelButton>
-
-            <BoxelButton
-              @kind='primary'
-              @size='base'
-              class='activity-button-desktop'
-              data-test-settings-button
-            >
-              <PlusIcon />
-              New Activity
-            </BoxelButton>
-          </:icon>
-          <:content>
-            {{! remove activity mock }}
-          </:content>
-        </SummaryCard>
-      </:activities>
-
       <:tasks>
         <SummaryCard class='tasks-summary-card'>
           <:title>
-            <h2 class='activity-title'>Upcoming Tasks</h2>
+            <h2 class='task-title'>Upcoming Tasks</h2>
           </:title>
           <:icon>
             <BoxelButton
               @kind='primary'
-              class='activity-button-mobile'
+              class='task-button-mobile'
               data-test-settings-button
               @disabled={{this.activeTasks.isLoading}}
               @loading={{this._createNewTask.isRunning}}
@@ -486,7 +456,7 @@ class IsolatedTemplate extends Component<typeof Account> {
             <BoxelButton
               @kind='primary'
               @size='base'
-              class='activity-button-desktop'
+              class='task-button-desktop'
               @disabled={{this.activeTasks.isLoading}}
               @loading={{this._createNewTask.isRunning}}
               data-test-settings-button
@@ -589,40 +559,38 @@ class IsolatedTemplate extends Component<typeof Account> {
       .default-value {
         color: var(--boxel-400);
       }
-      /* Activities */
-      .activity-button-mobile {
+      /* Task */
+      .task-button-mobile {
         display: none;
       }
-      .activity-button-desktop {
+      .task-button-desktop {
         display: inline-flex;
       }
-      .activities-summary-card {
-        --summary-card-padding: var(--boxel-sp-xl) var(--boxel-sp);
-        container-type: inline-size;
-        container-name: activities-summary-card;
-      }
       .tasks-summary-card {
+        --summary-card-padding: var(--boxel-sp-xl) var(--boxel-sp);
         --summary-card-content-gap: 0;
+        container-type: inline-size;
+        container-name: tasks-summary-card;
       }
       .tasks-summary-card :where(.task-card) {
         --task-card-padding: var(--boxel-sp) 0;
         border-top: 1px solid var(--boxel-200);
       }
-      .activity-title {
+      .task-title {
         font: 600 var(--boxel-font-med);
         letter-spacing: var(--boxel-lsp-xxs);
         margin: 0;
       }
-      .activity-pill {
+      .task-pill {
         --pill-background-color: var(--boxel-200);
       }
-      .activity-card-group {
+      .task-card-group {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: var(--boxel-sp);
       }
-      .activity-time {
+      .task-time {
         font-size: var(--boxel-font-xs);
         color: var(--boxel-color-gray);
         margin-left: auto;
@@ -642,20 +610,20 @@ class IsolatedTemplate extends Component<typeof Account> {
         justify-content: center;
       }
 
-      @container activities-summary-card (max-width: 447px) {
-        .activity-button-mobile {
+      @container tasks-summary-card (max-width: 447px) {
+        .task-button-mobile {
           display: inline-flex;
           --boxel-button-padding: 0px 0px;
           min-width: 2rem;
         }
-        .activity-button-desktop {
+        .task-button-desktop {
           display: none;
         }
-        .activity-card-group {
+        .task-card-group {
           flex-direction: column;
           align-items: flex-start;
         }
-        .activity-time {
+        .task-time {
           margin-left: 0;
         }
       }
@@ -952,18 +920,6 @@ class EmbeddedTemplate extends Component<typeof Account> {
               </div>
             </article>
 
-            <article>
-              <label>NEXT STEPS</label>
-              <div class='next-steps-display'>
-                {{! TODO: Add activity tasks after lucas pr go in }}
-                <EntityIconDisplay @title='--'>
-                  <:icon>
-                    <CalendarTime />
-                  </:icon>
-                </EntityIconDisplay>
-              </div>
-            </article>
-
             <article>
               <label>PRIORITY TASKS</label>
               {{#if this.activeTasks.isLoading}}
@@ -1318,7 +1274,6 @@ interface AccountPageLayoutArgs {
   Blocks: {
     header: [];
     summary: [];
-    activities: [];
     tasks: [];
   };
   Element: HTMLElement;
@@ -1329,7 +1284,6 @@ class AccountPageLayout extends GlimmerComponent<AccountPageLayoutArgs> {
     <div class='account-page-layout' ...attributes>
       {{yield to='header'}}
       {{yield to='summary'}}
-      {{yield to='activities'}}
       {{yield to='tasks'}}
     </div>
 

From cfb66dc57ec5310bbb5e548edc7520f8e03945fd Mon Sep 17 00:00:00 2001
From: lucaslyl <lucas.law@cardstack.com>
Date: Thu, 13 Feb 2025 16:37:45 +0800
Subject: [PATCH 2/5] fix lint

---
 packages/experiments-realm/crm/account.gts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index 2b12e179fc..70fb69fd55 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -25,12 +25,10 @@ import TrendingUp from '@cardstack/boxel-icons/trending-up';
 import ContactIcon from '@cardstack/boxel-icons/contact';
 import { BoxelButton } from '@cardstack/boxel-ui/components';
 import PlusIcon from '@cardstack/boxel-icons/plus';
-import CalendarTime from '@cardstack/boxel-icons/calendar-time';
 import { Pill } from '@cardstack/boxel-ui/components';
 import { Query } from '@cardstack/runtime-common/query';
 import { getCards } from '@cardstack/runtime-common';
 import { Deal } from './deal';
-import EntityIconDisplay from '../components/entity-icon-display';
 import type { LooseSingleCardDocument } from '@cardstack/runtime-common';
 import { restartableTask } from 'ember-concurrency';
 import { on } from '@ember/modifier';

From 8ae3955c76c1655991ec0f4c93a714589be9f903 Mon Sep 17 00:00:00 2001
From: lucaslyl <lucas.law@cardstack.com>
Date: Mon, 17 Feb 2025 11:13:07 +0800
Subject: [PATCH 3/5] implement skeleton placeholder to boxel-ui component

---
 packages/boxel-ui/addon/src/components.ts     |   2 +
 .../components/skeleton-placeholder/index.gts |  89 +++++++++++++++
 .../components/skeleton-placeholder/usage.gts | 102 ++++++++++++++++++
 packages/boxel-ui/addon/src/usage.ts          |   2 +
 4 files changed, 195 insertions(+)
 create mode 100644 packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts
 create mode 100644 packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts

diff --git a/packages/boxel-ui/addon/src/components.ts b/packages/boxel-ui/addon/src/components.ts
index 05f79ba72a..12224187d2 100644
--- a/packages/boxel-ui/addon/src/components.ts
+++ b/packages/boxel-ui/addon/src/components.ts
@@ -51,6 +51,7 @@ import ResizablePanelGroup, {
   ResizeHandle,
 } from './components/resizable-panel-group/index.gts';
 import BoxelSelect from './components/select/index.gts';
+import SkeletonPlaceholder from './components/skeleton-placeholder/index.gts';
 import Switch from './components/switch/index.gts';
 import TabbedHeader from './components/tabbed-header/index.gts';
 import Tooltip from './components/tooltip/index.gts';
@@ -106,6 +107,7 @@ export {
   ResizablePanel,
   ResizablePanelGroup,
   ResizeHandle,
+  SkeletonPlaceholder,
   Switch,
   TabbedHeader,
   Tooltip,
diff --git a/packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts b/packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts
new file mode 100644
index 0000000000..37a69a4943
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/skeleton-placeholder/index.gts
@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+
+interface Signature {
+  Args: {
+    animation?: 'wave' | 'pulse' | 'none';
+  };
+  Element: HTMLDivElement;
+}
+
+export default class SkeletonPlaceholder extends Component<Signature> {
+  get animationClass(): string {
+    return this.args.animation ?? 'wave';
+  }
+
+  <template>
+    <div
+      class='boxel-skeleton-placeholder {{this.animationClass}}'
+      data-test-boxel-skeleton-placeholder
+      ...attributes
+    />
+
+    <style scoped>
+      .boxel-skeleton-placeholder {
+        --skeleton-background: var(
+          --boxel-skeleton-background,
+          var(--boxel-light-200)
+        );
+        --skeleton-highlight: var(
+          --boxel-skeleton-highlight,
+          var(--boxel-light-100)
+        );
+        --skeleton-width: var(--boxel-skeleton-width, 100%);
+        --skeleton-height: var(--boxel-skeleton-height, 1.5em);
+        --skeleton-border-radius: var(
+          --boxel-skeleton-border-radius,
+          var(--boxel-border-radius-sm)
+        );
+        width: var(--skeleton-width);
+        height: var(--skeleton-height);
+        border-radius: var(--skeleton-border-radius);
+        background-color: var(--skeleton-background);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .wave::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        animation: wave 1.6s linear 0.5s infinite;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--skeleton-highlight),
+          transparent
+        );
+        transform: translateX(-100%);
+      }
+
+      .pulse {
+        animation: pulse 1.5s ease-in-out 0.5s infinite;
+      }
+
+      @keyframes wave {
+        0% {
+          transform: translateX(-200%);
+        }
+        100% {
+          transform: translateX(100%);
+        }
+      }
+
+      @keyframes pulse {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.4;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    </style>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts b/packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts
new file mode 100644
index 0000000000..a48c79e13b
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts
@@ -0,0 +1,102 @@
+import { array, fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import {
+  type CSSVariableInfo,
+  cssVariable,
+} from 'ember-freestyle/decorators/css-variable';
+import { cssVar } from '../../helpers/css-var.ts';
+
+import SkeletonPlaceholder from './index.gts';
+
+export default class SkeletonPlaceholderUsage extends Component {
+  @tracked width = '200px';
+  @tracked height = '20px';
+  @tracked borderRadius = '4px';
+  @tracked animation: 'wave' | 'pulse' | 'none' = 'wave';
+
+  @cssVariable({ cssClassName: 'skeleton-freestyle-container' })
+  declare boxelSkeletonBackground: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'skeleton-freestyle-container' })
+  declare boxelSkeletonHighlight: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'skeleton-freestyle-container' })
+  declare boxelSkeletonWidth: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'skeleton-freestyle-container' })
+  declare boxelSkeletonHeight: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'skeleton-freestyle-container' })
+  declare boxelSkeletonBorderRadius: CSSVariableInfo;
+
+  <template>
+    <div
+      class='skeleton-freestyle-container'
+      style={{cssVar
+        boxel-skeleton-background=this.boxelSkeletonBackground.value
+        boxel-skeleton-highlight=this.boxelSkeletonHighlight.value
+        boxel-skeleton-width=this.boxelSkeletonWidth.value
+        boxel-skeleton-height=this.boxelSkeletonHeight.value
+        boxel-skeleton-border-radius=this.boxelSkeletonBorderRadius.value
+      }}
+    >
+      <FreestyleUsage @name='Skeleton Placeholder'>
+        <:description>
+          A skeleton placeholder component to show loading states
+        </:description>
+        <:example>
+          <SkeletonPlaceholder @animation={{this.animation}} />
+        </:example>
+        <:api as |Args|>
+          <Args.String
+            @name='animation'
+            @value={{this.animation}}
+            @options={{array 'wave' 'pulse' 'none'}}
+            @description='Animation type for the skeleton'
+            @onInput={{fn (mut this.animation)}}
+          />
+        </:api>
+        <:cssVars as |Css|>
+          <Css.Basic
+            @name='boxel-skeleton-width'
+            @type='string'
+            @description='Width of the skeleton (px or %)'
+            @defaultValue={{this.boxelSkeletonWidth.defaults}}
+            @value={{this.boxelSkeletonWidth.value}}
+            @onInput={{this.boxelSkeletonWidth.update}}
+          />
+          <Css.Basic
+            @name='boxel-skeleton-height'
+            @type='string'
+            @description='Height of the skeleton (px or %)'
+            @defaultValue={{this.boxelSkeletonHeight.defaults}}
+            @value={{this.boxelSkeletonHeight.value}}
+            @onInput={{this.boxelSkeletonHeight.update}}
+          />
+          <Css.Basic
+            @name='boxel-skeleton-border-radius'
+            @type='string'
+            @description='Border radius of the skeleton'
+            @defaultValue={{this.boxelSkeletonBorderRadius.defaults}}
+            @value={{this.boxelSkeletonBorderRadius.value}}
+            @onInput={{this.boxelSkeletonBorderRadius.update}}
+          />
+          <Css.Basic
+            @name='boxel-skeleton-background'
+            @type='color'
+            @description='Background color of the skeleton'
+            @defaultValue={{this.boxelSkeletonBackground.defaults}}
+            @value={{this.boxelSkeletonBackground.value}}
+            @onInput={{this.boxelSkeletonBackground.update}}
+          />
+          <Css.Basic
+            @name='boxel-skeleton-highlight'
+            @type='color'
+            @description='Highlight color for the wave animation (only applies when animation=wave)'
+            @defaultValue={{this.boxelSkeletonHighlight.defaults}}
+            @value={{this.boxelSkeletonHighlight.value}}
+            @onInput={{this.boxelSkeletonHighlight.update}}
+          />
+        </:cssVars>
+      </FreestyleUsage>
+    </div>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/usage.ts b/packages/boxel-ui/addon/src/usage.ts
index e1880e60cf..64999f02c1 100644
--- a/packages/boxel-ui/addon/src/usage.ts
+++ b/packages/boxel-ui/addon/src/usage.ts
@@ -34,6 +34,7 @@ import RadioInputUsage from './components/radio-input/usage.gts';
 import RealmIconUsage from './components/realm-icon/usage.gts';
 import ResizablePanelGroupUsage from './components/resizable-panel-group/usage.gts';
 import SelectUsage from './components/select/usage.gts';
+import SkeletonPlaceholderUsage from './components/skeleton-placeholder/usage.gts';
 import SwitchUsage from './components/switch/usage.gts';
 import TabbedHeaderUsage from './components/tabbed-header/usage.gts';
 import TooltipUsage from './components/tooltip/usage.gts';
@@ -75,6 +76,7 @@ export const ALL_USAGE_COMPONENTS = [
   ['RealmIcon', RealmIconUsage],
   ['ResizablePanelGroup', ResizablePanelGroupUsage],
   ['Select', SelectUsage],
+  ['SkeletonPlaceholder', SkeletonPlaceholderUsage],
   ['Switch', SwitchUsage],
   ['TabbedHeader', TabbedHeaderUsage],
   ['Tooltip', TooltipUsage],

From bec556c8277f1f371b09a36f419a05c041340e8d Mon Sep 17 00:00:00 2001
From: lucaslyl <lucas.law@cardstack.com>
Date: Mon, 17 Feb 2025 11:13:53 +0800
Subject: [PATCH 4/5] implement skeleton loader for card query loading state

---
 packages/experiments-realm/crm/account.gts | 55 ++++++++++++----------
 packages/experiments-realm/crm/deal.gts    | 17 +++++--
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index 70fb69fd55..0b5a788f3d 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -23,7 +23,10 @@ import AccountHeader from '../components/account-header';
 import { WebsiteField } from '../website';
 import TrendingUp from '@cardstack/boxel-icons/trending-up';
 import ContactIcon from '@cardstack/boxel-icons/contact';
-import { BoxelButton } from '@cardstack/boxel-ui/components';
+import {
+  BoxelButton,
+  SkeletonPlaceholder,
+} from '@cardstack/boxel-ui/components';
 import PlusIcon from '@cardstack/boxel-icons/plus';
 import { Pill } from '@cardstack/boxel-ui/components';
 import { Query } from '@cardstack/runtime-common/query';
@@ -399,8 +402,12 @@ class IsolatedTemplate extends Component<typeof Account> {
             </:icon>
             <:content>
               {{#if this.lifetimeValueDeals.isLoading}}
-                <h3 class='summary-highlight'>Loading...</h3>
-                <p class='description'>Loading...</p>
+                <SkeletonPlaceholder
+                  class='skeleton-placeholder-deal-summary-highlight'
+                />
+                <SkeletonPlaceholder
+                  class='skeleton-placeholder-deal-description'
+                />
               {{else}}
                 <h3 class='summary-highlight'>
                   {{this.formattedLifetimeTotal}}
@@ -408,7 +415,6 @@ class IsolatedTemplate extends Component<typeof Account> {
                 <p class='description'>
                   {{this.formattedCurrentYearValue}}
                 </p>
-
               {{/if}}
             </:content>
           </SummaryCard>
@@ -422,8 +428,12 @@ class IsolatedTemplate extends Component<typeof Account> {
             </:icon>
             <:content>
               {{#if this.deals.isLoading}}
-                <h3 class='summary-highlight'>Loading...</h3>
-                <p class='description'>Loading...</p>
+                <SkeletonPlaceholder
+                  class='skeleton-placeholder-deal-summary-highlight'
+                />
+                <SkeletonPlaceholder
+                  class='skeleton-placeholder-deal-description'
+                />
               {{else}}
                 <h3 class='summary-highlight'>{{this.activeDealsCount}}</h3>
                 <p class='description'>{{this.totalDealsValue}}</p>
@@ -468,7 +478,7 @@ class IsolatedTemplate extends Component<typeof Account> {
           </:icon>
           <:content>
             {{#if this.activeTasks.isLoading}}
-              <div class='loading-skeleton'>Loading...</div>
+              <SkeletonPlaceholder class='skeleton-placeholder-task' />
             {{else}}
               {{#if this.hasActiveTasks}}
                 {{#each this.activeTasks.instances as |task|}}
@@ -598,14 +608,16 @@ class IsolatedTemplate extends Component<typeof Account> {
         --profile-avatar-icon-border: 0px;
         flex-shrink: 0;
       }
-      .loading-skeleton {
-        height: 60px;
-        width: 100%;
-        background-color: var(--boxel-100);
-        border-radius: var(--boxel-border-radius-sm);
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      /* Skeleton Placeholder */
+      .skeleton-placeholder-deal-summary-highlight {
+        --skeleton-width: 50%;
+        --skeleton-height: 22px;
+      }
+      .skeleton-placeholder-deal-description {
+        --skeleton-height: 13px;
+      }
+      .skeleton-placeholder-task {
+        --skeleton-height: 55px;
       }
 
       @container tasks-summary-card (max-width: 447px) {
@@ -921,7 +933,7 @@ class EmbeddedTemplate extends Component<typeof Account> {
             <article>
               <label>PRIORITY TASKS</label>
               {{#if this.activeTasks.isLoading}}
-                <div class='loading-skeleton'>Loading...</div>
+                <SkeletonPlaceholder class='skeleton-placeholder-task' />
               {{else}}
                 <div class='task-container'>
                   {{#if this.hasActiveTasks}}
@@ -1069,14 +1081,9 @@ class EmbeddedTemplate extends Component<typeof Account> {
         --task-card-padding: var(--boxel-sp) 0;
         border-top: 1px solid var(--boxel-200);
       }
-      .loading-skeleton {
-        height: 60px;
-        width: 100%;
-        background: var(--boxel-light-300);
-        border-radius: var(--boxel-border-radius-sm);
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      /* Skeleton Placeholder */
+      .skeleton-placeholder-task {
+        --skeleton-height: 55px;
       }
 
       @container account-page-layout-embedded (max-width: 447px) {
diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
index f6e8e9bb5c..6db43cb954 100644
--- a/packages/experiments-realm/crm/deal.gts
+++ b/packages/experiments-realm/crm/deal.gts
@@ -15,7 +15,11 @@ import DateField from 'https://cardstack.com/base/date';
 import GlimmerComponent from '@glimmer/component';
 import SummaryCard from '../components/summary-card';
 import SummaryGridContainer from '../components/summary-grid-container';
-import { Pill, BoxelButton } from '@cardstack/boxel-ui/components';
+import {
+  Pill,
+  BoxelButton,
+  SkeletonPlaceholder,
+} from '@cardstack/boxel-ui/components';
 import { cn, not } from '@cardstack/boxel-ui/helpers';
 import Info from '@cardstack/boxel-icons/info';
 import AccountHeader from '../components/account-header';
@@ -308,7 +312,9 @@ class IsolatedTemplate extends Component<typeof Deal> {
                 Current Value
                 <@fields.computedValue class='highlight-value' @format='atom' />
                 {{#if this.query.isLoading}}
-                  Loading...
+                  <SkeletonPlaceholder
+                    class='skeleton-placeholder-deal-description'
+                  />
                 {{else if this.query.instances}}
                   {{#let
                     (this.dealSizeSummary this.query.instances)
@@ -473,7 +479,8 @@ class IsolatedTemplate extends Component<typeof Deal> {
             </:icon>
             <:content>
               {{#if this.activeTasks.isLoading}}
-                <div class='loading-skeleton'>Loading...</div>
+                <SkeletonPlaceholder />
+                <SkeletonPlaceholder />
               {{else}}
                 {{#if this.hasActiveTasks}}
                   {{#each this.activeTasks.instances as |task|}}
@@ -653,6 +660,10 @@ class IsolatedTemplate extends Component<typeof Deal> {
         gap: var(--boxel-sp-sm);
         font-weight: 600;
       }
+      /* Skeleton Placeholder */
+      .skeleton-placeholder-deal-description {
+        --skeleton-height: var(--boxel-font-sm);
+      }
       @container (max-width: 447px) {
         .progress-container {
           flex-direction: column-reverse;

From 48a02fadf3192253d5ed662e3eb52fc089c59db4 Mon Sep 17 00:00:00 2001
From: lucaslyl <lucas.law@cardstack.com>
Date: Mon, 17 Feb 2025 11:59:46 +0800
Subject: [PATCH 5/5] fix lint

---
 .../addon/src/components/skeleton-placeholder/usage.gts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts b/packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts
index a48c79e13b..f0013a19b4 100644
--- a/packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts
+++ b/packages/boxel-ui/addon/src/components/skeleton-placeholder/usage.gts
@@ -6,8 +6,8 @@ import {
   type CSSVariableInfo,
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
-import { cssVar } from '../../helpers/css-var.ts';
 
+import { cssVar } from '../../helpers/css-var.ts';
 import SkeletonPlaceholder from './index.gts';
 
 export default class SkeletonPlaceholderUsage extends Component {