Skip to content

Commit

Permalink
Merge pull request #157 from eclipse-sw360/heliocastro/page_spinning
Browse files Browse the repository at this point in the history 
Create PageSpinner for page loading status
  • Loading branch information
@hoangnt2
hoangnt2 authored Oct 20, 2023
2 parents 50c8e37 + 878fbf8 commit 1f2b15d
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 58 deletions.
54 changes: 30 additions & 24 deletions src/app/[locale]/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@

import { useSession } from 'next-auth/react'

import MyProjectsWidget from './components/MyProjectsWidget'
import { PageSpinner } from 'next-sw360'

import MyComponentsWidget from './components/MyComponentsWidget'
import MyProjectsWidget from './components/MyProjectsWidget'
import MySubscriptionsWidget from './components/MySubscriptionsWidget'
import MyTaskAssignmentsWidget from './components/MyTaskAssignmentsWidget'
import MyTaskSubmissionsWidget from './components/MyTaskSubmissionsWidget'
import MySubscriptionsWidget from './components/MySubscriptionsWidget'
import RecentComponentsWidget from './components/RecentComponentsWidget'
import RecentReleasesWidget from './components/RecentReleasesWidget'

Expand All @@ -36,37 +38,41 @@ function HomePage() {

return (
<div className='content-container container-fluid homePage'>
<div className='row'>
<div className='col col-md-10'>
<div className='row'>
<div className='col-sm' id='sw360_table_col'>
<MyProjectsWidget />
{status == 'loading' ? (
<PageSpinner />
) : (
<div className='row'>
<div className='col col-md-10'>
<div className='row'>
<div className='col-sm' id='sw360_table_col'>
<MyProjectsWidget />
</div>
<div className='col-sm' id='sw360_table_col'>
<MyComponentsWidget />
</div>
</div>
<div className='col-sm' id='sw360_table_col'>
<MyComponentsWidget />
<div className='row'>
<div className='col-sm' id='sw360_table_col'>
<MyTaskAssignmentsWidget />
</div>
<div className='col-sm' id='sw360_table_col'>
<MyTaskSubmissionsWidget />
</div>
</div>
</div>
<div className='row'>
<div className='col col-md-2'>
<div className='col-sm' id='sw360_table_col'>
<MyTaskAssignmentsWidget />
<MySubscriptionsWidget />
</div>
<div className='col-sm' id='sw360_table_col'>
<MyTaskSubmissionsWidget />
<RecentComponentsWidget />
</div>
<div className='col-sm' id='sw360_table_col'>
<RecentReleasesWidget />
</div>
</div>
</div>
<div className='col col-md-2'>
<div className='col-sm' id='sw360_table_col'>
<MySubscriptionsWidget />
</div>
<div className='col-sm' id='sw360_table_col'>
<RecentComponentsWidget />
</div>
<div className='col-sm' id='sw360_table_col'>
<RecentReleasesWidget />
</div>
</div>
</div>
)}
</div>
)
}
Expand Down
76 changes: 42 additions & 34 deletions src/components/sw360/AuthScreen/AuthScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { Alert, Button, Form, Modal } from 'react-bootstrap'

import { CREDENTIALS } from '@/constants'
import { HttpStatus } from '@/object-types'
import { LanguageSwitcher } from 'next-sw360'
import { LanguageSwitcher, PageSpinner } from 'next-sw360'

function AuthScreen() {
const router = useRouter()
Expand Down Expand Up @@ -52,42 +52,50 @@ function AuthScreen() {
<>
<section className='portlet' id='portlet_sw360_portlet_welcome'>
<div>
<div className='portlet-content-container p-1' style={{ background: '#f1f2f5' }}>
<div className='portlet-body p-5'>
<div className='jumbotron'>
<h1 className='display-4'>{t('Welcome to SW360!')}</h1>
<LanguageSwitcher />
<br />
<p className='mt-3'>{t('SW360_INFO')}</p>
<hr className='my-4' />
<h3>{t('In order to go ahead, please sign in or create a new account!')}</h3>
{status === 'unauthenticated' ? (
<div className='buttons'>
<span>
<a className='btn btn-primary btn-lg' role='button' onClick={handleShow}>
{t('Sign In')}
{status == 'loading' ? (
<PageSpinner />
) : (
<div className='portlet-content-container p-1' style={{ background: '#f1f2f5' }}>
<div className='portlet-body p-5'>
<div className='jumbotron'>
<h1 className='display-4'>{t('Welcome to SW360!')}</h1>
<LanguageSwitcher />
<br />
<p className='mt-3'>{t('SW360_INFO')}</p>
<hr className='my-4' />
<h3>{t('In order to go ahead, please sign in or create a new account!')}</h3>
{status === 'unauthenticated' ? (
<div className='buttons'>
<span>
<a
className='btn btn-primary btn-lg'
role='button'
onClick={handleShow}
>
{t('Sign In')}
</a>
</span>
<a
className='btn btn-outline-primary btn-lg'
style={{ marginLeft: '3rem' }}
role='button'
>
{t('Create Account')}
</a>
</span>
<a
className='btn btn-outline-primary btn-lg'
style={{ marginLeft: '3rem' }}
role='button'
>
{t('Create Account')}
</a>
</div>
) : (
<div className='buttons'>
<span>
<Link className='btn btn-primary btn-lg' role='button' href='/home'>
{t('Start')}
</Link>
</span>
</div>
)}
</div>
) : (
<div className='buttons'>
<span>
<Link className='btn btn-primary btn-lg' role='button' href='/home'>
{t('Start')}
</Link>
</span>
</div>
)}
</div>
</div>
</div>
</div>
)}
</div>
</section>

Expand Down
22 changes: 22 additions & 0 deletions src/components/sw360/PageSpinner/PageSpinner.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Copyright (c) Helio Chissini de Castro, 2023. Part of the SW360 Frontend Project.

// This program and the accompanying materials are made
// available under the terms of the Eclipse Public License 2.0
// which is available at https://www.eclipse.org/legal/epl-2.0/

// SPDX-License-Identifier: EPL-2.0
// License-Filename: LICENSE

import { Spinner } from 'react-bootstrap'

function PageSpinner() {
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '80vh' }}>
<Spinner className='spinner'>
<span className='visually-hidden'>Loading...</span>
</Spinner>
</div>
)
}

export default PageSpinner
2 changes: 2 additions & 0 deletions src/components/sw360/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import LanguageSwitcher from './LanguageSwitcher/LanguageSwitcher'
import ModeratorsDialog from './ModeratorsDialog/ModeratorsDialog'
import Navbar from './Navbar/Navbar'
import PageButtonHeader from './PageButtonHeader/PageButtonHeader'
import PageSpinner from './PageSpinner/PageSpinner'
import ProfileDropdown from './ProfileDropdown/ProfileDropdown'
import QuickFilter from './QuickFilter/QuickFilter'
import SearchUsersModal from './SearchUsersModal//SearchUsersModal'
Expand Down Expand Up @@ -49,6 +50,7 @@ export {
ModeratorsDialog,
Navbar,
PageButtonHeader,
PageSpinner,
ProfileDropdown,
QuickFilter,
ReactWrapper,
Expand Down

0 comments on commit 1f2b15d

Please sign in to comment.