fix(web-components/file-input): flicker of image preview before loading spinner

[saraparsa13]

Describe the bug:

When a user selects a file and the upload begins (i.e. loading={true}), the component briefly renders the selected image preview, then switches to the loading spinner, and finally shows the preview again once the upload completes. This “blink” of the image before the spinner appears is visually jarring.

To Reproduce:

1. Render your file-input:

<TapsiFileInput
  label="upload the image"
  hideLabel
  placeholder="upload the image"
  accept="image/*"
  disabled={isPending}
  loading={isPending} 
  onInput={handleUploadFile}
  error={isError}
  errorText="error on uploading the image, please try again!"
/>

2. Select an image file so that handleUploadFile fires the upload API call and sets isPending = true.
3. Observe that on selection you see the image flash briefly, then the spinner, and finally the image preview again after the API call resolves.

Expected behavior:

• Immediately hide any image preview and show the loading spinner as soon as the upload API call begins (loading=true).
• No preview should appear until the API call completes successfully.

Desktop:

OS: macOS 14.4.1
Browser: Chrome 135
@tapsioss/web‑components: v0.11.1

Additional context:

This brief flash undermines the perception of a smooth upload flow. The component should transition cleanly into the loading state as soon as the API call is triggered, without showing any preview until the upload finishes.

Recording:

Screen.Recording.1404-01-31.at.12.40.51.mov

[amir78729]

Resolves in #422