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 {