ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

Clean up whitelabel AdditionalDataForms

Browse Source
This commit is contained in:
Brett Sun 2016-01-15 17:17:34 +01:00
parent 50129b9d0c
commit 8d9df43339
5 changed files with 155 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
View File

@ -23,9 +23,10 @@ import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_
let CylandAdditionalDataForm = React.createClass({ let CylandAdditionalDataForm = React.createClass({
propTypes: { propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool isInline: React.PropTypes.bool
}, },
@ -42,13 +43,13 @@ let CylandAdditionalDataForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000); const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
getFormData() { getFormData() {
let extradata = {}; const extradata = {};
let formRefs = this.refs.form.refs; const formRefs = this.refs.form.refs;
// Put additional fields in extra data object // Put additional fields in extra data object
Object Object
@ -71,10 +72,13 @@ let CylandAdditionalDataForm = React.createClass({
}, },
render() { render() {
let { piece, isInline, disabled, handleSuccess, location } = this.props; const { disabled, handleSuccess, isInline, piece } = this.props;
let buttons, spinner, heading;
if(!isInline) { let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" type="submit"
@ -87,7 +91,7 @@ let CylandAdditionalDataForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -101,7 +105,7 @@ let CylandAdditionalDataForm = React.createClass({
); );
} }
if(piece && piece.id) { if (piece.id && piece.extra_data) {
return ( return (
<Form <Form
disabled={disabled} disabled={disabled}
@ -120,7 +124,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.artist_bio} defaultValue={piece.extra_data.artist_bio}
placeholder={getLangText('Enter the artist\'s biography...')}/> placeholder={getLangText('Enter the artist\'s biography...')} />
</Property> </Property>
<Property <Property
name='artist_contact_information' name='artist_contact_information'
@ -129,7 +133,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.artist_contact_information} defaultValue={piece.extra_data.artist_contact_information}
placeholder={getLangText('Enter the artist\'s contact information...')}/> placeholder={getLangText('Enter the artist\'s contact information...')} />
</Property> </Property>
<Property <Property
name='conceptual_overview' name='conceptual_overview'
@ -138,7 +142,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.conceptual_overview} defaultValue={piece.extra_data.conceptual_overview}
placeholder={getLangText('Enter a conceptual overview...')}/> placeholder={getLangText('Enter a conceptual overview...')} />
</Property> </Property>
<Property <Property
name='medium' name='medium'
@ -147,7 +151,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.medium} defaultValue={piece.extra_data.medium}
placeholder={getLangText('Enter the medium (and other technical specifications)...')}/> placeholder={getLangText('Enter the medium (and other technical specifications)...')} />
</Property> </Property>
<Property <Property
name='size_duration' name='size_duration'
@ -156,7 +160,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.size_duration} defaultValue={piece.extra_data.size_duration}
placeholder={getLangText('Enter the size / duration...')}/> placeholder={getLangText('Enter the size / duration...')} />
</Property> </Property>
<Property <Property
name='display_instructions' name='display_instructions'
@ -165,7 +169,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.display_instructions} defaultValue={piece.extra_data.display_instructions}
placeholder={getLangText('Enter the display instructions...')}/> placeholder={getLangText('Enter the display instructions...')} />
</Property> </Property>
<Property <Property
name='additional_details' name='additional_details'
@ -174,7 +178,7 @@ let CylandAdditionalDataForm = React.createClass({
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.additional_details} defaultValue={piece.extra_data.additional_details}
placeholder={getLangText('Enter additional details...')}/> placeholder={getLangText('Enter additional details...')} />
</Property> </Property>
<FurtherDetailsFileuploader <FurtherDetailsFileuploader
label={getLangText('Additional files (e.g. still images, pdf)')} label={getLangText('Additional files (e.g. still images, pdf)')}
@ -189,7 +193,7 @@ let CylandAdditionalDataForm = React.createClass({
} else { } else {
return ( return (
<div className="ascribe-loading-position"> <div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</div> </div>
); );
} }

1
js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
View File

@ -122,6 +122,7 @@ let IkonotvPieceContainer = React.createClass({
if (piece.id) { if (piece.id) {
setDocumentTitle([piece.artist_name, piece.title].join(', ')); setDocumentTitle([piece.artist_name, piece.title].join(', '));
return ( return (
<WalletPieceContainer <WalletPieceContainer
piece={piece} piece={piece}

51
js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
View File

@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
let IkonotvArtistDetailsForm = React.createClass({ let IkonotvArtistDetailsForm = React.createClass({
propTypes: { propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool isInline: React.PropTypes.bool
}, },
@ -35,8 +34,8 @@ let IkonotvArtistDetailsForm = React.createClass({
}, },
getFormData() { getFormData() {
let extradata = {}; const extradata = {};
let formRefs = this.refs.form.refs; const formRefs = this.refs.form.refs;
// Put additional fields in extra data object // Put additional fields in extra data object
Object Object
@ -53,20 +52,23 @@ let IkonotvArtistDetailsForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000); const notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
render() { render() {
let buttons, spinner, heading; const { disabled, isInline, handleSuccess, piece } = this.props;
let { isInline, handleSuccess } = this.props;
let buttons;
let spinner;
let heading;
if (!isInline) { if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" type="submit"
className="btn btn-default btn-wide" className="btn btn-default btn-wide"
disabled={this.props.disabled}> disabled={disabled}>
{getLangText('Proceed to loan')} {getLangText('Proceed to loan')}
</button> </button>
); );
@ -74,7 +76,7 @@ let IkonotvArtistDetailsForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -88,13 +90,13 @@ let IkonotvArtistDetailsForm = React.createClass({
); );
} }
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) { if (piece.id && piece.extra_data) {
return ( return (
<Form <Form
disabled={this.props.disabled} disabled={disabled}
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref='form' ref='form'
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})} url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
handleSuccess={handleSuccess || this.handleSuccess} handleSuccess={handleSuccess || this.handleSuccess}
getFormData={this.getFormData} getFormData={this.getFormData}
buttons={buttons} buttons={buttons}
@ -103,39 +105,38 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property <Property
name='artist_website' name='artist_website'
label={getLangText('Artist Website')} label={getLangText('Artist Website')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}> expanded={!disabled || !!piece.extra_data.artist_website}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.artist_website} defaultValue={piece.extra_data.artist_website}
placeholder={getLangText('The artist\'s website if present...')}/> placeholder={getLangText('The artist\'s website if present...')} />
</Property> </Property>
<Property <Property
name='gallery_website' name='gallery_website'
label={getLangText('Website of related Gallery, Museum, etc.')} label={getLangText('Website of related Gallery, Museum, etc.')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}> expanded={!disabled || !!piece.extra_data.gallery_website}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.gallery_website} defaultValue={piece.extra_data.gallery_website}
placeholder={getLangText('The website of any related Gallery or Museum')}/> placeholder={getLangText('The website of any related Gallery or Museum')} />
</Property> </Property>
<Property <Property
name='additional_websites' name='additional_websites'
label={getLangText('Additional Websites/Publications/Museums/Galleries')} label={getLangText('Additional Websites/Publications/Museums/Galleries')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}> expanded={!disabled || !!piece.extra_data.additional_websites}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.additional_websites} defaultValue={piece.extra_data.additional_websites}
placeholder={getLangText('Enter additional Websites/Publications if any')}/> placeholder={getLangText('Enter additional Websites/Publications if any')} />
</Property> </Property>
<Property <Property
name='conceptual_overview' name='conceptual_overview'
label={getLangText('Short text about the Artist')} label={getLangText('Short text about the Artist')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}> expanded={!disabled || !!piece.extra_data.conceptual_overview}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.conceptual_overview} defaultValue={piece.extra_data.conceptual_overview}
placeholder={getLangText('Enter a short bio about the Artist')} placeholder={getLangText('Enter a short bio about the Artist')} />
/>
</Property> </Property>
</Form> </Form>
); );

62
js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
View File

@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
let IkonotvArtworkDetailsForm = React.createClass({ let IkonotvArtworkDetailsForm = React.createClass({
propTypes: { propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool isInline: React.PropTypes.bool
}, },
@ -35,8 +34,8 @@ let IkonotvArtworkDetailsForm = React.createClass({
}, },
getFormData() { getFormData() {
let extradata = {}; const extradata = {};
let formRefs = this.refs.form.refs; const formRefs = this.refs.form.refs;
// Put additional fields in extra data object // Put additional fields in extra data object
Object Object
@ -53,20 +52,23 @@ let IkonotvArtworkDetailsForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
let notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000); const notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
render() { render() {
let buttons, spinner, heading; const { disabled, isInline, handleSuccess, piece } = this.props;
let { isInline, handleSuccess } = this.props;
let buttons;
let spinner;
let heading;
if (!isInline) { if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" type="submit"
className="btn btn-default btn-wide" className="btn btn-default btn-wide"
disabled={this.props.disabled}> disabled={disabled}>
{getLangText('Proceed to artist details')} {getLangText('Proceed to artist details')}
</button> </button>
); );
@ -74,7 +76,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -88,13 +90,13 @@ let IkonotvArtworkDetailsForm = React.createClass({
); );
} }
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) { if (piece.id && piece.extra_data) {
return ( return (
<Form <Form
disabled={this.props.disabled} disabled={disabled}
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref='form' ref='form'
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})} url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
handleSuccess={handleSuccess || this.handleSuccess} handleSuccess={handleSuccess || this.handleSuccess}
getFormData={this.getFormData} getFormData={this.getFormData}
buttons={buttons} buttons={buttons}
@ -103,56 +105,56 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property <Property
name='medium' name='medium'
label={getLangText('Medium')} label={getLangText('Medium')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}> expanded={!disabled || !!piece.extra_data.medium}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.medium} defaultValue={piece.extra_data.medium}
placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/> placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')} />
</Property> </Property>
<Property <Property
name='size_duration' name='size_duration'
label={getLangText('Size/Duration')} label={getLangText('Size/Duration')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}> expanded={!disabled || !!piece.extra_data.size_duration}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.size_duration} defaultValue={piece.extra_data.size_duration}
placeholder={getLangText('Size in centimeters. Duration in minutes.')}/> placeholder={getLangText('Size in centimeters. Duration in minutes.')} />
</Property> </Property>
<Property <Property
name='copyright' name='copyright'
label={getLangText('Copyright')} label={getLangText('Copyright')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}> expanded={!disabled || !!piece.extra_data.copyright}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.copyright} defaultValue={piece.extra_data.copyright}
placeholder={getLangText('Which copyright is attached to this work?')}/> placeholder={getLangText('Which copyright is attached to this work?')} />
</Property> </Property>
<Property <Property
name='courtesy_of' name='courtesy_of'
label={getLangText('Courtesy of')} label={getLangText('Courtesy of')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}> expanded={!disabled || !!piece.extra_data.courtesy_of}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.courtesy_of} defaultValue={piece.extra_data.courtesy_of}
placeholder={getLangText('The current owner of the artwork')}/> placeholder={getLangText('The current owner of the artwork')} />
</Property> </Property>
<Property <Property
name='copyright_of_photography' name='copyright_of_photography'
label={getLangText('Copyright of Photography')} label={getLangText('Copyright of Photography')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}> expanded={!disabled || !!piece.extra_data.copyright_of_photography}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.copyright_of_photography} defaultValue={piece.extra_data.copyright_of_photography}
placeholder={getLangText('Who should be attributed for the photography?')}/> placeholder={getLangText('Who should be attributed for the photography?')} />
</Property> </Property>
<Property <Property
name='additional_details' name='additional_details'
label={getLangText('Additional Details about the artwork')} label={getLangText('Additional Details about the artwork')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}> expanded={!disabled || !!piece.extra_data.additional_details}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.additional_details} defaultValue={piece.extra_data.additional_details}
placeholder={getLangText('Insert artwork overview')}/> placeholder={getLangText('Insert artwork overview')} />
</Property> </Property>
</Form> </Form>
); );

141
js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
View File

@ -109,7 +109,7 @@ let MarketAdditionalDataForm = React.createClass({
render() { render() {
const { const {
editable, editable,
extraData, extraData = {},
isInline, isInline,
handleSuccess, handleSuccess,
otherData, otherData,
@ -118,8 +118,9 @@ let MarketAdditionalDataForm = React.createClass({
showNotification, showNotification,
submitLabel } = this.props; submitLabel } = this.props;
let buttons, heading; let buttons;
let spinner = <AscribeSpinner color='dark-blue' size='lg' />; let heading;
let spinner;
if (!isInline) { if (!isInline) {
buttons = ( buttons = (
@ -134,7 +135,7 @@ let MarketAdditionalDataForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
{spinner} <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -148,68 +149,76 @@ let MarketAdditionalDataForm = React.createClass({
) : null; ) : null;
} }
return ( if (pieceId) {
<Form return (
className="ascribe-form-bordered" <Form
ref='form' className="ascribe-form-bordered"
key={this.state.forceUpdateKey} ref='form'
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: pieceId})} key={this.state.forceUpdateKey}
handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess} url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}
getFormData={this.getFormData} handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
buttons={buttons} getFormData={this.getFormData}
spinner={spinner} buttons={buttons}
disabled={!this.props.editable}> spinner={spinner}
{heading} disabled={!this.props.editable}>
<FurtherDetailsFileuploader {heading}
label={getLangText('Marketplace Thumbnail Image')} <FurtherDetailsFileuploader
submitFile={function () {}} label={getLangText('Marketplace Thumbnail Image')}
setIsUploadReady={this.setIsUploadReady} submitFile={function () {}}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} setIsUploadReady={this.setIsUploadReady}
pieceId={pieceId} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
otherData={otherData} pieceId={pieceId}
editable={editable} /> otherData={otherData}
<Property editable={editable} />
name='artist_bio' <Property
label={getLangText('Artist Bio')} name='artist_bio'
expanded={editable || !!extraData.artist_bio}> label={getLangText('Artist Bio')}
<InputTextAreaToggable expanded={editable || !!extraData.artist_bio}>
rows={1} <InputTextAreaToggable
defaultValue={extraData.artist_bio} rows={1}
placeholder={getLangText('Enter a biography of the artist...')} defaultValue={extraData.artist_bio}
required /> placeholder={getLangText('Enter a biography of the artist...')}
</Property> required />
<Property </Property>
name='work_description' <Property
label={getLangText('Work Description')} name='work_description'
expanded={editable || !!extraData.work_description}> label={getLangText('Work Description')}
<InputTextAreaToggable expanded={editable || !!extraData.work_description}>
rows={1} <InputTextAreaToggable
defaultValue={extraData.work_description} rows={1}
placeholder={getLangText('Enter a description of the work...')} defaultValue={extraData.work_description}
required /> placeholder={getLangText('Enter a description of the work...')}
</Property> required />
<Property </Property>
name='technology_details' <Property
label={getLangText('Technology Details')} name='technology_details'
expanded={editable || !!extraData.technology_details}> label={getLangText('Technology Details')}
<InputTextAreaToggable expanded={editable || !!extraData.technology_details}>
rows={1} <InputTextAreaToggable
defaultValue={extraData.technology_details} rows={1}
placeholder={getLangText('Enter technological details about the work...')} defaultValue={extraData.technology_details}
required /> placeholder={getLangText('Enter technological details about the work...')}
</Property> required />
<Property </Property>
name='display_instructions' <Property
label={getLangText('Display Instructions')} name='display_instructions'
expanded={editable || !!extraData.display_instructions}> label={getLangText('Display Instructions')}
<InputTextAreaToggable expanded={editable || !!extraData.display_instructions}>
rows={1} <InputTextAreaToggable
defaultValue={extraData.display_instructions} rows={1}
placeholder={getLangText('Enter instructions on how to best display the work...')} defaultValue={extraData.display_instructions}
required /> placeholder={getLangText('Enter instructions on how to best display the work...')}
</Property> required />
</Form> </Property>
); </Form>
);
} else {
return (
<div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
}
} }
}); });