FileUpload flashes without css then displays fully

Package

filament/filament

Package Version

v3.2.100

Laravel Version

v10.48.20

Livewire Version

No response

PHP Version

PHP 8.1

Problem description

When I click on CreateAction to open FileUpload, it flashes for about 1 second without css and then it displays with css.

Expected behavior

when I click on CreateAction to open FileUpload it has to open the full Upload form and no blinking is allowed

Steps to reproduce

/**

@param Form $form
@return Form */ public function form(Form $form): Form { return $form ->schema([ Forms\Components\FileUpload::make('attachment') ->required() ->preserveFilenames() ->disk('s3') ->directory($this->getStorageDirectory()) ->visibility('public') ->maxSize(51200) ->live(onBlur: true) ->afterStateUpdated(function ($state, callable $set) { if ($state) { $fileName = pathinfo($state->getClientOriginalName(), PATHINFO_FILENAME); $set('name', $fileName); $set('file_type', $state->getMimeType()); $set('file_path', $this->getStorageDirectory() . '/' . $state->getClientOriginalName()); } }), Forms\Components\Hidden::make('name'), Forms\Components\Hidden::make('file_type'), Forms\Components\Hidden::make('file_path'), ])->columns(1); }

/**
@param Table $table
@return Table */ public function table(Table $table): Table { return $table ->recordTitleAttribute('name') ->paginated(false) ->recordAction(null) ->columns([ Tables\Columns\TextColumn::make('name'), Tables\Columns\TextColumn::make('file_type'), ]) ->filters([ // ]) ->headerActions([ Tables\Actions\CreateAction::make() ->label('Upload files') ->icon('heroicon-m-arrow-up-tray') ->createAnother(false) ->modalWidth(MaxWidth::TwoExtraLarge) ->modalHeading('Upload files') ->modalSubmitActionLabel('Upload') ->mutateFormDataUsing(function (array $data): array { $data['candidate_id'] = $this->ownerRecord->id; return $data; }) ->action(function ($data) { $this->ownerRecord->files()->create($data);
```
                Notification::make()
                    ->title('File uploaded successfully')
                    ->success()
                    ->send();
            }),
    ])
```

Reproduction repository (issue will be closed if this is not valid)

https://github.com/filamentphp/filament

Relevant log output

No response

Donate 💰 to fund this issue

You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
100% of the funding will be distributed between the Filament core team to run all aspects of the project.
Thank you in advance for helping us make maintenance sustainable!

Hey @VuongPham2001! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

filamentphp / filament