From aa6c90285a5f82c3ab78a4598ac825c44976af3a Mon Sep 17 00:00:00 2001
From: Antoine Prentout <antoine.prentout@upfluence.com>
Date: Mon, 18 Aug 2025 15:33:21 +0200
Subject: [PATCH 1/5] Smart Textarea: Add new component

---
 addon/components/o-s-s/smart/tag-input.hbs    |   4 +-
 addon/components/o-s-s/smart/tag-input.ts     |   4 +
 addon/components/o-s-s/smart/text-area.hbs    |  23 +++
 .../o-s-s/smart/text-area.stories.js          | 121 +++++++++++++++
 addon/components/o-s-s/smart/text-area.ts     |  43 ++++++
 addon/components/o-s-s/text-area.ts           |  14 +-
 app/components/o-s-s/smart/text-area.js       |   1 +
 app/styles/atoms/smart-textarea.less          |  53 +++++++
 app/styles/oss-components.less                |   1 +
 tests/dummy/app/controllers/smart.ts          |   8 +
 tests/dummy/app/templates/smart.hbs           |  20 +++
 .../components/o-s-s/smart/text-area-test.ts  | 144 ++++++++++++++++++
 12 files changed, 428 insertions(+), 8 deletions(-)
 create mode 100644 addon/components/o-s-s/smart/text-area.hbs
 create mode 100644 addon/components/o-s-s/smart/text-area.stories.js
 create mode 100644 addon/components/o-s-s/smart/text-area.ts
 create mode 100644 app/components/o-s-s/smart/text-area.js
 create mode 100644 app/styles/atoms/smart-textarea.less
 create mode 100644 tests/integration/components/o-s-s/smart/text-area-test.ts

diff --git a/addon/components/o-s-s/smart/tag-input.hbs b/addon/components/o-s-s/smart/tag-input.hbs
index 60dc39551..2de81268d 100644
--- a/addon/components/o-s-s/smart/tag-input.hbs
+++ b/addon/components/o-s-s/smart/tag-input.hbs
@@ -10,9 +10,7 @@
       </div>
     {{else}}
       <div class="fx-col">
-        <span class="hidden-span">
-          {{if (or this.inputValue this.isInputFocused) this.inputValue this.placeholder}}
-        </span>
+        <span class="hidden-span">{{this.hiddenSpanValue}}</span>
         <Input
           class="displayed-input"
           @value={{this.inputValue}}
diff --git a/addon/components/o-s-s/smart/tag-input.ts b/addon/components/o-s-s/smart/tag-input.ts
index 15127ba45..175c74f35 100644
--- a/addon/components/o-s-s/smart/tag-input.ts
+++ b/addon/components/o-s-s/smart/tag-input.ts
@@ -45,6 +45,10 @@ export default class OSSSmartTagInput extends Component<OSSSmartTagInputArgs> {
     return this.args.placeholder ?? this.intl.t('oss-components.smart.tag_input.placeholder');
   }
 
+  get hiddenSpanValue(): string {
+    return this.inputValue || this.isInputFocused ? this.inputValue : this.placeholder;
+  }
+
   @action
   registerElement(element: HTMLElement): void {
     this.element = element;
diff --git a/addon/components/o-s-s/smart/text-area.hbs b/addon/components/o-s-s/smart/text-area.hbs
new file mode 100644
index 000000000..c1bf990b9
--- /dev/null
+++ b/addon/components/o-s-s/smart/text-area.hbs
@@ -0,0 +1,23 @@
+<div
+  class="oss-smart-text-area-container {{if @hasError ' oss-smart-text-area-container--errored'}}"
+  {{did-insert this.registerElement}}
+  {{did-update this.handleUpdate @loading}}
+  ...attributes
+>
+  <div class="fx-row">
+    {{#if @loading}}
+      <div class="upf-input loading-placeholder fx-row fx-xalign-center">
+        <pre class="smart_text_animated">{{@placeholder}}</pre>
+      </div>
+    {{/if}}
+    <Textarea
+      @value={{@value}}
+      placeholder={{@placeholder}}
+      disabled={{@disabled}}
+      rows={{this.rows}}
+      class="oss-textarea {{this.computedClass}}"
+      {{on "keyup" (fn this._onChange @value)}}
+    />
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/text-area.stories.js b/addon/components/o-s-s/smart/text-area.stories.js
new file mode 100644
index 000000000..f782ab338
--- /dev/null
+++ b/addon/components/o-s-s/smart/text-area.stories.js
@@ -0,0 +1,121 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+const ResizeTypes = ['horizontal', 'vertical', 'none', null];
+
+export default {
+  title: 'Components/OSS::Smart::TextArea',
+  component: 'smart text-area',
+  argTypes: {
+    value: {
+      description: 'Value of the textarea',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    rows: {
+      description: 'Number of rows dispayed in the textarea',
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: { summary: 2 }
+      },
+      control: { type: 'number' }
+    },
+    resize: {
+      description: 'Define direction in which textarea can be resized (By default the resize is set to Both)',
+      table: {
+        type: {
+          summary: ResizeTypes.join('|')
+        },
+        defaultValue: { summary: 'both' }
+      },
+      options: ResizeTypes,
+      control: { type: 'select' }
+    },
+    disabled: {
+      description: 'Disable the default textarea',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    placeholder: {
+      description: 'Placeholder of the textarea',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    loading: {
+      description: 'Indicates if the textarea is in a loading state',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    hasError: {
+      description: 'Indicates if the textarea has an error',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: { summary: false }
+      },
+      control: { type: 'boolean' }
+    },
+    onChange: {
+      description: 'Method called every time the textarea is updated',
+      table: {
+        category: 'Actions',
+        type: {
+          summary: 'onChange(value: string): void'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The OSS version of the textarea component.'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  value: 'John',
+  rows: 2,
+  resize: null,
+  disabled: false,
+  placeholder: 'this is the placeholder',
+  hasError: false,
+  loading: false,
+  onChange: action('onChange')
+};
+
+const DefaultUsageTemplate = (args) => ({
+  template: hbs`
+      <OSS::Smart::TextArea @value={{this.value}} @disabled={{this.disabled}} @placeholder={{this.placeholder}}
+                     @hasError={{this.hasError}} @onChange={{this.onChange}} @rows={{this.rows}}
+                     @resize={{this.resize}} @loading={{this.loading}}/>
+  `,
+  context: args
+});
+
+export const BasicUsage = DefaultUsageTemplate.bind({});
+BasicUsage.args = defaultArgs;
diff --git a/addon/components/o-s-s/smart/text-area.ts b/addon/components/o-s-s/smart/text-area.ts
new file mode 100644
index 000000000..e8876db8d
--- /dev/null
+++ b/addon/components/o-s-s/smart/text-area.ts
@@ -0,0 +1,43 @@
+import { action } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+import { tracked } from '@glimmer/tracking';
+import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
+import type { OSSTextAreaArgs } from '../text-area';
+import OSSTextArea from '../text-area';
+
+interface OSSSmartImmersiveInputComponentSignature extends OSSTextAreaArgs {
+  value: string;
+  loading: boolean;
+  hasError?: boolean;
+}
+
+export default class OSSSmartTextareaComponent extends OSSTextArea<OSSSmartImmersiveInputComponentSignature> {
+  @tracked declare element: HTMLElement;
+  @tracked declare textAreaElement: HTMLTextAreaElement;
+
+  @action
+  handleUpdate(): void {
+    if (!this.args.loading && !isEmpty(this.args.value)) {
+      runSmartGradientAnimation(this.element);
+    }
+  }
+
+  @action
+  registerElement(element: HTMLElement): void {
+    this.element = element;
+  }
+
+  get resize(): 'vertical' | 'horizontal' | 'none' {
+    return this.args.resize ?? 'none';
+  }
+
+  get computedClass(): string {
+    let computedClass = super.computedClass;
+
+    if (this.args.loading) {
+      computedClass += ' oss-textarea--loading';
+    }
+
+    return computedClass;
+  }
+}
diff --git a/addon/components/o-s-s/text-area.ts b/addon/components/o-s-s/text-area.ts
index 04b38001b..eb5dbde67 100644
--- a/addon/components/o-s-s/text-area.ts
+++ b/addon/components/o-s-s/text-area.ts
@@ -2,7 +2,7 @@ import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
-interface OSSTextAreaArgs {
+export interface OSSTextAreaArgs {
   rows?: number;
   resize?: 'vertical' | 'horizontal' | 'none';
   value?: string;
@@ -12,7 +12,7 @@ interface OSSTextAreaArgs {
   onChange?(value: string): void;
 }
 
-export default class OSSTextArea extends Component<OSSTextAreaArgs> {
+export default class OSSTextArea<T extends OSSTextAreaArgs> extends Component<T> {
   constructor(owner: unknown, args: OSSTextAreaArgs) {
     super(owner, args);
 
@@ -28,11 +28,15 @@ export default class OSSTextArea extends Component<OSSTextAreaArgs> {
     return this.args.rows || 2;
   }
 
+  get resize(): 'vertical' | 'horizontal' | 'none' | undefined {
+    return this.args.resize;
+  }
+
   get computedClass(): string {
     const classes: string[] = [];
-    if (this.args.resize === 'vertical') classes.push('oss-textarea--resize-v');
-    else if (this.args.resize === 'horizontal') classes.push('oss-textarea--resize-h');
-    else if (this.args.resize === 'none') classes.push('oss-textarea--resize-none');
+    if (this.resize === 'vertical') classes.push('oss-textarea--resize-v');
+    else if (this.resize === 'horizontal') classes.push('oss-textarea--resize-h');
+    else if (this.resize === 'none') classes.push('oss-textarea--resize-none');
 
     return classes.join(' ');
   }
diff --git a/app/components/o-s-s/smart/text-area.js b/app/components/o-s-s/smart/text-area.js
new file mode 100644
index 000000000..cae83d991
--- /dev/null
+++ b/app/components/o-s-s/smart/text-area.js
@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/smart/text-area';
diff --git a/app/styles/atoms/smart-textarea.less b/app/styles/atoms/smart-textarea.less
new file mode 100644
index 000000000..df29690aa
--- /dev/null
+++ b/app/styles/atoms/smart-textarea.less
@@ -0,0 +1,53 @@
+.oss-smart-text-area-container {
+  .oss-textarea-container;
+  flex: 1;
+  // max-width: fit-content;
+  // width: 100%;
+
+  > div {
+    position: relative;
+  }
+
+  .loading-placeholder {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .smart_text_animated {
+    background: var(--color-gray-400);
+    background: linear-gradient(
+      130deg,
+      var(--color-gray-400) 18%,
+      var(--color-gray-300) 25%,
+      rgba(250, 198, 255, 1) 56%,
+      var(--color-primary-100) 62%,
+      var(--color-white) 66%,
+      rgba(250, 198, 255, 0.58) 68%,
+      var(--color-gray-300) 73%,
+      var(--color-gray-400) 85%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: smart_loading_text_animation 3.5s ease-in-out infinite;
+    background-size: 600% 100%;
+    padding: var(--spacing-px-6) 0px;
+
+    border: 0;
+    font-family: var(--font-family-stack);
+    .font-size-sm;
+  }
+
+  .oss-textarea {
+    transition: all 0s;
+  }
+
+  .oss-textarea--loading {
+    visibility: hidden;
+  }
+}
diff --git a/app/styles/oss-components.less b/app/styles/oss-components.less
index adbb80200..e7efbd371 100644
--- a/app/styles/oss-components.less
+++ b/app/styles/oss-components.less
@@ -56,6 +56,7 @@
 @import 'atoms/smart/logo';
 @import 'atoms/smart/tag';
 @import 'atoms/smart/tag-input';
+@import 'atoms/smart-textarea';
 @import 'molecules/progress-bar';
 @import 'molecules/select';
 @import 'molecules/nav-tab';
diff --git a/tests/dummy/app/controllers/smart.ts b/tests/dummy/app/controllers/smart.ts
index 35c0bba98..f5f730d14 100644
--- a/tests/dummy/app/controllers/smart.ts
+++ b/tests/dummy/app/controllers/smart.ts
@@ -59,6 +59,8 @@ export default class Smart extends Controller {
   ];
   @tracked smartTags: { value: string; type: TagType }[] = [];
   @tracked inputValue: string = '';
+  @tracked textAreaValue: string = '';
+  @tracked multilinePlaceholder: string = 'Small placeholder\nwith multiple\nlines';
 
   constructor() {
     super(...arguments);
@@ -190,6 +192,12 @@ export default class Smart extends Controller {
     return '';
   }
 
+  @action
+  onTextAreaChange(value: string): void {
+    console.log('Text area value changed:', value);
+    this.textAreaValue = value;
+  }
+
   @action
   fakeLoadData(): void {
     this.loading = true;
diff --git a/tests/dummy/app/templates/smart.hbs b/tests/dummy/app/templates/smart.hbs
index abdc0fd72..1008fd492 100644
--- a/tests/dummy/app/templates/smart.hbs
+++ b/tests/dummy/app/templates/smart.hbs
@@ -6,6 +6,26 @@
     <span class="font-color-gray-500 font-size-xs text-style-italic">(also they might be smarter than you who knows)</span>
   </div>
 
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Text-area
+    </div>
+    <div class="fx-col fx-gap-px-24">
+      <div class="fx-row fx-gap-px-24 fx-xalign-center">
+        <OSS::Button @label="Toggle loading" {{on "click" this.toggleLoading}} />
+        <OSS::Smart::TextArea
+          @value={{this.textAreaValue}}
+          @onChange={{this.onTextAreaChange}}
+          @rows={{7}}
+          @placeholder={{this.multilinePlaceholder}}
+          @loading={{this.loading}}
+        />
+      </div>
+    </div>
+  </div>
+
   <div
     class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
   >
diff --git a/tests/integration/components/o-s-s/smart/text-area-test.ts b/tests/integration/components/o-s-s/smart/text-area-test.ts
new file mode 100644
index 000000000..1a2b6879a
--- /dev/null
+++ b/tests/integration/components/o-s-s/smart/text-area-test.ts
@@ -0,0 +1,144 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, setupOnerror, typeIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/smart/text-area', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.value = 'Data';
+
+    this.textareaSelector = '.oss-smart-text-area-container  .oss-textarea';
+    this.placeholder = 'Multiline\nplaceholder';
+  });
+
+  test('it renders', async function (assert) {
+    await render(hbs`<OSS::Smart::TextArea @label='test' />`);
+    assert.dom('.oss-smart-text-area-container').exists();
+  });
+
+  module('@resize', function () {
+    test('Default has no class resize', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea />`);
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-v');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-h');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-none');
+    });
+
+    test('When resize is vertical should have class resize-v', async function (assert) {
+      this.resize = 'vertical';
+      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}}/>`);
+      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-v');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-h');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-none');
+    });
+
+    test('When resize is horizontal should have class resize-h', async function (assert) {
+      this.resize = 'horizontal';
+      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}}/>`);
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-v');
+      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-h');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-none');
+    });
+
+    test('When resize is none should have class resize-none', async function (assert) {
+      this.resize = 'none';
+      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}}/>`);
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-v');
+      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-h');
+      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-none');
+    });
+  });
+
+  module('@rows', function () {
+    test('Default height', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea />`);
+
+      assert.equal(document.querySelector(this.textareaSelector).offsetHeight, 52);
+    });
+
+    test('Row change height', async function (assert) {
+      this.rows = 2;
+      await render(hbs`<OSS::Smart::TextArea @rows={{this.rows}}/>`);
+
+      const twoRowHeight = document.querySelector(this.textareaSelector).offsetHeight;
+      assert.ok(twoRowHeight > 36);
+
+      await this.set('rows', 8);
+      const heightRowHeight = document.querySelector(this.textareaSelector).offsetHeight;
+
+      assert.ok(heightRowHeight > twoRowHeight);
+    });
+  });
+
+  test('When the field is updated, the @onChange method is called', async function (assert) {
+    this.onChange = sinon.spy();
+
+    await render(hbs`<OSS::Smart::TextArea @value={{this.value}} @onChange={{this.onChange}}/>`);
+    await typeIn(this.textareaSelector, 'b');
+
+    assert.ok(this.onChange.calledOnceWithExactly('Datab'));
+  });
+
+  module('Extra attributes', () => {
+    test('passing an extra class is applied to the component', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea class="my-extra-class" />`);
+      assert.dom('.my-extra-class').exists();
+    });
+
+    test('passing data-control-name works', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea data-control-name="description-input" />`);
+      let inputWrapper: Element | null = document.querySelector('.oss-smart-text-area-container');
+
+      assert.equal(inputWrapper?.getAttribute('data-control-name'), 'description-input');
+    });
+  });
+
+  module('error management', () => {
+    test('it throws an error if @resize is not a correct value', async function (assert) {
+      setupOnerror((err: any) => {
+        assert.equal(
+          err.message,
+          'Assertion Failed: [component][OSS::TextArea] The @resize parameter should be a value of resize'
+        );
+      });
+
+      this.resize = 'NotACorrectValue';
+      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}} />`);
+    });
+  });
+
+  module('loading', (hooks) => {
+    hooks.beforeEach(function () {
+      this.loading = true;
+    });
+
+    test('When input is loading, it display an animated div instead of the input', async function (assert) {
+      await render(hbs`<OSS::Smart::TextArea @placeholder={{this.placeholder}} @loading={{this.loading}}/>`);
+
+      assert.dom('.oss-smart-text-area-container .oss-textarea').hasClass('oss-textarea--loading');
+      assert.dom('.loading-placeholder').exists();
+      assert.dom('.loading-placeholder').hasText(this.placeholder);
+    });
+
+    module('Once loading is finished', () => {
+      test('If value is empty, it does not display an animation once', async function (assert) {
+        await render(hbs`<OSS::Smart::TextArea @placeholder={{this.placeholder}} @loading={{this.loading}}/>`);
+
+        this.set('loading', false);
+        assert.dom('.oss-smart-text-area-container').hasNoClass('smart-rotating-gradient');
+      });
+
+      test('If value is filled, it display an animation once', async function (assert) {
+        await render(
+          hbs`<OSS::Smart::TextArea @value="filled" @placeholder={{this.placeholder}} @loading={{this.loading}}/>`
+        );
+
+        this.set('loading', false);
+        assert.dom('.oss-smart-text-area-container').hasClass('smart-rotating-gradient');
+      });
+    });
+  });
+});

From 450f199cac7b8a0168ea73429629db3713497eda Mon Sep 17 00:00:00 2001
From: Antoine Prentout <antoine.prentout@upfluence.com>
Date: Mon, 18 Aug 2025 16:01:19 +0200
Subject: [PATCH 2/5] Smart Textarea: Fix test

---
 .../components/o-s-s/smart/text-area-test.ts         | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/tests/integration/components/o-s-s/smart/text-area-test.ts b/tests/integration/components/o-s-s/smart/text-area-test.ts
index 1a2b6879a..6bf4dcabe 100644
--- a/tests/integration/components/o-s-s/smart/text-area-test.ts
+++ b/tests/integration/components/o-s-s/smart/text-area-test.ts
@@ -20,11 +20,11 @@ module('Integration | Component | o-s-s/smart/text-area', function (hooks) {
   });
 
   module('@resize', function () {
-    test('Default has no class resize', async function (assert) {
+    test('Default it has the none resize class', async function (assert) {
       await render(hbs`<OSS::Smart::TextArea />`);
       assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-v');
       assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-h');
-      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-none');
+      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-none');
     });
 
     test('When resize is vertical should have class resize-v', async function (assert) {
@@ -42,14 +42,6 @@ module('Integration | Component | o-s-s/smart/text-area', function (hooks) {
       assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-h');
       assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-none');
     });
-
-    test('When resize is none should have class resize-none', async function (assert) {
-      this.resize = 'none';
-      await render(hbs`<OSS::Smart::TextArea @resize={{this.resize}}/>`);
-      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-v');
-      assert.dom(this.textareaSelector).hasNoClass('oss-textarea--resize-h');
-      assert.dom(this.textareaSelector).hasClass('oss-textarea--resize-none');
-    });
   });
 
   module('@rows', function () {

From e167116d1d627d869fc64903d1e8429733ed134b Mon Sep 17 00:00:00 2001
From: Antoine Prentout <antoine.prentout@upfluence.com>
Date: Mon, 18 Aug 2025 17:23:36 +0200
Subject: [PATCH 3/5] Smart Textarea: Fix pr feedbacks

---
 addon/components/o-s-s/smart/text-area.hbs            |  2 +-
 .../components/o-s-s/smart/text-area-test.ts          | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/addon/components/o-s-s/smart/text-area.hbs b/addon/components/o-s-s/smart/text-area.hbs
index c1bf990b9..7133aacdd 100644
--- a/addon/components/o-s-s/smart/text-area.hbs
+++ b/addon/components/o-s-s/smart/text-area.hbs
@@ -7,7 +7,7 @@
   <div class="fx-row">
     {{#if @loading}}
       <div class="upf-input loading-placeholder fx-row fx-xalign-center">
-        <pre class="smart_text_animated">{{@placeholder}}</pre>
+        <pre class="smart_text_animated">{{or @value @placeholder}}</pre>
       </div>
     {{/if}}
     <Textarea
diff --git a/tests/integration/components/o-s-s/smart/text-area-test.ts b/tests/integration/components/o-s-s/smart/text-area-test.ts
index 6bf4dcabe..3cc99e367 100644
--- a/tests/integration/components/o-s-s/smart/text-area-test.ts
+++ b/tests/integration/components/o-s-s/smart/text-area-test.ts
@@ -115,6 +115,17 @@ module('Integration | Component | o-s-s/smart/text-area', function (hooks) {
       assert.dom('.loading-placeholder').hasText(this.placeholder);
     });
 
+    test('When input is loading, and a value is set it use the value instead of placeholder', async function (assert) {
+      this.set('value', 'Small value');
+      await render(
+        hbs`<OSS::Smart::TextArea @placeholder={{this.placeholder}} @loading={{this.loading}} @value={{this.value}}/>`
+      );
+
+      assert.dom('.oss-smart-text-area-container .oss-textarea').hasClass('oss-textarea--loading');
+      assert.dom('.loading-placeholder').exists();
+      assert.dom('.loading-placeholder').hasText(this.value);
+    });
+
     module('Once loading is finished', () => {
       test('If value is empty, it does not display an animation once', async function (assert) {
         await render(hbs`<OSS::Smart::TextArea @placeholder={{this.placeholder}} @loading={{this.loading}}/>`);

From 510a08f12f674b77141faa5270cc87df206b2672 Mon Sep 17 00:00:00 2001
From: Antoine Prentout <antoine.prentout@upfluence.com>
Date: Tue, 19 Aug 2025 15:06:34 +0200
Subject: [PATCH 4/5] Fix pr feedback

---
 app/styles/atoms/smart-textarea.less                       | 2 --
 tests/integration/components/o-s-s/smart/text-area-test.ts | 1 -
 2 files changed, 3 deletions(-)

diff --git a/app/styles/atoms/smart-textarea.less b/app/styles/atoms/smart-textarea.less
index df29690aa..88f75032e 100644
--- a/app/styles/atoms/smart-textarea.less
+++ b/app/styles/atoms/smart-textarea.less
@@ -1,8 +1,6 @@
 .oss-smart-text-area-container {
   .oss-textarea-container;
   flex: 1;
-  // max-width: fit-content;
-  // width: 100%;
 
   > div {
     position: relative;
diff --git a/tests/integration/components/o-s-s/smart/text-area-test.ts b/tests/integration/components/o-s-s/smart/text-area-test.ts
index 3cc99e367..7019b8f68 100644
--- a/tests/integration/components/o-s-s/smart/text-area-test.ts
+++ b/tests/integration/components/o-s-s/smart/text-area-test.ts
@@ -9,7 +9,6 @@ module('Integration | Component | o-s-s/smart/text-area', function (hooks) {
 
   hooks.beforeEach(function () {
     this.value = 'Data';
-
     this.textareaSelector = '.oss-smart-text-area-container  .oss-textarea';
     this.placeholder = 'Multiline\nplaceholder';
   });

From 729b072941c2de5645b7683426428edc7e6e306e Mon Sep 17 00:00:00 2001
From: Antoine Prentout <antoine.prentout@upfluence.com>
Date: Wed, 20 Aug 2025 16:01:04 +0200
Subject: [PATCH 5/5] Fix pr feedback

---
 addon/components/o-s-s/smart/text-area.ts | 4 ++--
 addon/components/o-s-s/text-area.ts       | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/addon/components/o-s-s/smart/text-area.ts b/addon/components/o-s-s/smart/text-area.ts
index e8876db8d..52222c64e 100644
--- a/addon/components/o-s-s/smart/text-area.ts
+++ b/addon/components/o-s-s/smart/text-area.ts
@@ -2,7 +2,7 @@ import { action } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 import { tracked } from '@glimmer/tracking';
 import { runSmartGradientAnimation } from '@upfluence/oss-components/utils/run-smart-gradient-animation';
-import type { OSSTextAreaArgs } from '../text-area';
+import type { OSSTextAreaArgs, textAreaResizeOptions } from '../text-area';
 import OSSTextArea from '../text-area';
 
 interface OSSSmartImmersiveInputComponentSignature extends OSSTextAreaArgs {
@@ -27,7 +27,7 @@ export default class OSSSmartTextareaComponent extends OSSTextArea<OSSSmartImmer
     this.element = element;
   }
 
-  get resize(): 'vertical' | 'horizontal' | 'none' {
+  get resize(): textAreaResizeOptions | undefined {
     return this.args.resize ?? 'none';
   }
 
diff --git a/addon/components/o-s-s/text-area.ts b/addon/components/o-s-s/text-area.ts
index eb5dbde67..d0efda609 100644
--- a/addon/components/o-s-s/text-area.ts
+++ b/addon/components/o-s-s/text-area.ts
@@ -2,9 +2,11 @@ import { assert } from '@ember/debug';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
+export type textAreaResizeOptions = 'vertical' | 'horizontal' | 'none';
+
 export interface OSSTextAreaArgs {
   rows?: number;
-  resize?: 'vertical' | 'horizontal' | 'none';
+  resize?: textAreaResizeOptions;
   value?: string;
   disabled?: boolean;
   errorMessage?: string;
@@ -28,7 +30,7 @@ export default class OSSTextArea<T extends OSSTextAreaArgs> extends Component<T>
     return this.args.rows || 2;
   }
 
-  get resize(): 'vertical' | 'horizontal' | 'none' | undefined {
+  get resize(): textAreaResizeOptions | undefined {
     return this.args.resize;
   }