From 45daa2807b3bc848ce987d706ae816b6fe6bb460 Mon Sep 17 00:00:00 2001
From: Gordon Grund <80682839+ggrund-tsi@users.noreply.github.com>
Date: Mon, 5 Jul 2021 07:52:03 +0200
Subject: [PATCH] add fade animation (#107)

---
 src/assets/SCSS/custom.scss                   |  16 +-
 src/components/landing-page.component.tsx     |  17 +-
 .../modules/card-footer.component.tsx         |   2 +
 .../record-recovery-cert-data.component.tsx   | 251 +++++++++---------
 .../record-test-cert-data.component.tsx       | 219 +++++++--------
 ...record-vaccination-cert-data.component.tsx | 221 +++++++--------
 src/components/show-certificate.component.tsx | 154 +++++------
 src/misc/useValueSet.tsx                      |   8 +-
 src/routing.component.tsx                     |   8 +-
 9 files changed, 462 insertions(+), 434 deletions(-)

diff --git a/src/assets/SCSS/custom.scss b/src/assets/SCSS/custom.scss
index 9cfbb9d..6e2b2f9 100644
--- a/src/assets/SCSS/custom.scss
+++ b/src/assets/SCSS/custom.scss
@@ -1,5 +1,5 @@
 //Font Definitions
-@import '@fortawesome/fontawesome-free/css/solid.min.css';
+@import "@fortawesome/fontawesome-free/css/solid.min.css";
 
 // Override default variables before the import
 $body-bg: #cfcfcf;
@@ -22,8 +22,12 @@ $data-card-border-radius: 0px;
 $input-border-radius: 4px;
 $user-image-width: 39px;
 
-select, option {
-    font-family: 'Font Awesome 5 Free', 'Arial';
+select,
+option {
+    font-family: "Font Awesome 5 Free", "Arial";
+}
+body {
+    overflow-y: scroll;
   }
 
 hr {
@@ -60,6 +64,10 @@ hr {
     border-radius: $data-card-border-radius;
     border: none;
 }
+#data-body {
+    padding: 1rem;
+    padding-bottom: 0px;
+}
 .data-modal {
     background-color: white;
     border-radius: $data-card-border-radius;
@@ -325,6 +333,8 @@ hr {
     margin-left: 16px;
     display: flex;
     align-self: center;
+    padding-top: 2px;
+    height: 32px;
 }
 
 .bg-gray-1 {
diff --git a/src/components/landing-page.component.tsx b/src/components/landing-page.component.tsx
index b05d9af..aba99fa 100644
--- a/src/components/landing-page.component.tsx
+++ b/src/components/landing-page.component.tsx
@@ -19,7 +19,7 @@
  * under the License.
  */
 
-import { Button, Container } from 'react-bootstrap'
+import { Button, Container, Fade } from 'react-bootstrap'
 
 import '../i18n';
 import { useTranslation } from 'react-i18next';
@@ -41,15 +41,16 @@ const LandingPage = () => {
     }, [context.navigation])
 
     return (!isInit ? <Spinner /> :
-        <Container className='center-content'>
+        <Fade appear={true} in={true} >
+            <Container className='center-content'>
+                <span className='landing-title mx-auto mb-4'>{t('translation:welcome')}</span>
 
-            <span className='landing-title mx-auto mb-4'>{t('translation:welcome')}</span>
+                <Button block className='landing-btn my-2' onClick={context.navigation!.toRecordVac}>{t('translation:record-vaccination-cert-dat')}</Button>
+                <Button block className='landing-btn my-2' onClick={context.navigation!.toRecordTest}>{t('translation:record-test-cert-dat')}</Button>
+                <Button block className='landing-btn my-2' onClick={context.navigation!.toRecordRecovery}>{t('translation:record-recovery-cert-dat')}</Button>
 
-            <Button block className='landing-btn my-2' onClick={context.navigation!.toRecordVac}>{t('translation:record-vaccination-cert-dat')}</Button>
-            <Button block className='landing-btn my-2' onClick={context.navigation!.toRecordTest}>{t('translation:record-test-cert-dat')}</Button>
-            <Button block className='landing-btn my-2' onClick={context.navigation!.toRecordRecovery}>{t('translation:record-recovery-cert-dat')}</Button>
-
-        </Container>
+            </Container>
+        </Fade>
     )
 }
 
diff --git a/src/components/modules/card-footer.component.tsx b/src/components/modules/card-footer.component.tsx
index b053aa3..845863c 100644
--- a/src/components/modules/card-footer.component.tsx
+++ b/src/components/modules/card-footer.component.tsx
@@ -10,6 +10,8 @@ const CardFooter = (props: any) => {
 
     return (!props ? <></> :
         <Card.Footer id='data-footer'>
+            
+            <hr className='pb-3' />
             <Row>
                 <Col xs='6' md='3' className='pl-0 pr-2'>
                     <Button
diff --git a/src/components/record-recovery-cert-data.component.tsx b/src/components/record-recovery-cert-data.component.tsx
index a4f4235..9c1f92e 100644
--- a/src/components/record-recovery-cert-data.component.tsx
+++ b/src/components/record-recovery-cert-data.component.tsx
@@ -20,7 +20,7 @@
  */
 
 import React from 'react';
-import { Card, Col, Form, Row } from 'react-bootstrap';
+import { Card, Col, Fade, Form, Row } from 'react-bootstrap';
 
 import '../i18n';
 import { useTranslation } from 'react-i18next';
@@ -174,140 +174,141 @@ const RecordRecoveryCertData = (props: any) => {
     return (
         !(isInit && context && context.valueSets) ? <Spinner /> :
             <>
-                <Card id='data-card'>
+                <Fade appear={true} in={true} >
+                    <Card id='data-card'>
 
-                    <Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
+                        <Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
 
-                        {/*
+                            {/*
                             header with title and id card query
                         */}
-                        <CardHeader title={t('translation:record-recovery-cert-dat')} />
+                            <CardHeader title={t('translation:record-recovery-cert-dat')} />
 
-                        {/*
+                            {/*
                             content area with patient inputs and check box
                         */}
-                        <Card.Body id='data-body' className='p-3'>
-
-                            {/* name inputs */}
-                            <PersonInputs eudgc={props.eudgc} onChange={setPerson} />
-
-                            <hr />
-
-                            {/* combobox disease */}
-                            <FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
-                                value={disease}
-                                onChange={(evt: any) => setDisease(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
-                            />
-
-                            <hr />
-
-                            {/* Date of First Positive Test Result  */}
-                            <Form.Group as={Row} controlId='formLastDateInput' className='pb-3 mb-0'>
-                                <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:first-positive-test-date') + '*'}</Form.Label>
-
-                                <Col xs='7' sm='9' className='d-flex'>
-                                    <DatePicker
-                                        selected={firstPositiveResultDate}
-                                        onChange={handleFirstPositiveResultDate}
-                                        dateFormat='yyyy-MM-dd'
-                                        isClearable
-                                        placeholderText={t('translation:first-positive-test-date')}
-                                        className='qt-input form-control'
-                                        wrapperClassName='align-self-center'
-                                        showMonthDropdown
-                                        showYearDropdown
-                                        dropdownMode="select"
-                                        maxDate={dateValidFrom ? new Date(dateValidFrom.getTime() - timeAfter) : firstPosMaxDate}
-                                        minDate={dateValidTo ? new Date(dateValidTo.getTime() - expirationMilSeconds) : firstPosMinDate}
-                                        openToDate={firstPositiveResultDate
-                                            ? firstPositiveResultDate
-                                            : dateValidFrom
-                                                ? new Date(dateValidFrom.getTime() - timeAfter)
-                                                : new Date()}
-                                        required
-                                    />
-                                </Col>
-                            </Form.Group>
-
-                            {/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
-                            <FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:recovery-country')}
-                                value={testCountryCode}
-                                onChange={(evt: any) => setTestCountryCode(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.CountryCodes]}
-                            />
-
-                            <hr />
-
-                            {/* certificateIssuer */}
-                            <FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')} placeholder={t('translation:certificateIssuer')}
-                                value={certificateIssuer}
-                                onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
-                                required
-                                maxLength={80}
-                            />
-
-                            {/* Date: Certificate Valid From - To */}
-                            <Form.Group as={Row} controlId='formDateValidFromToInput' className='pb-3 mb-0'>
-                                <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:cert-valid-from-to') + '*'}</Form.Label>
-
-                                <Col xs='7' sm='9' className='d-flex'>
-                                    <DatePicker
-                                        selected={dateValidFrom}
-                                        onChange={handleDateValidFrom}
-                                        dateFormat='yyyy-MM-dd'
-                                        isClearable
-                                        placeholderText={t('translation:valid-from')}
-                                        className='qt-input form-control'
-                                        wrapperClassName='align-self-center'
-                                        showMonthDropdown
-                                        showYearDropdown
-                                        dropdownMode="select"
-                                        maxDate={new Date()}
-                                        minDate={firstPositiveResultDate
-                                            ? new Date(firstPositiveResultDate.getTime() + timeAfter)
-                                            : dateValidTo
-                                                ? new Date(dateValidTo.getTime() + timeAfter - expirationMilSeconds)
-                                                : new Date(Date.now() + timeAfter - expirationMilSeconds)}
-                                        openToDate={dateValidFrom ? dateValidFrom : new Date()}
-                                        required
-                                    />
-                                    <span className='space-five'>{'-'}</span>
-                                    <DatePicker
-                                        selected={dateValidTo}
-                                        onChange={handleDateValidTo}
-                                        dateFormat='yyyy-MM-dd'
-                                        isClearable
-                                        placeholderText={t('translation:valid-to')}
-                                        className='qt-input form-control'
-                                        wrapperClassName='align-self-center'
-                                        showMonthDropdown
-                                        showYearDropdown
-                                        dropdownMode="select"
-                                        maxDate={firstPositiveResultDate
-                                            ? new Date(firstPositiveResultDate.getTime() + expirationMilSeconds)
-                                            : dateValidFrom
-                                                ? new Date(dateValidFrom.getTime() - timeAfter + expirationMilSeconds)
-                                                : new Date(Date.now() - timeAfter + expirationMilSeconds)}
-                                        minDate={new Date()}
-                                        openToDate={dateValidTo ? dateValidTo : new Date()}
-                                        required
-                                    />
-                                </Col>
-                            </Form.Group>
-
-                            <hr />
-                        </Card.Body>
-
-                        {/*
+                            <Card.Body id='data-body'>
+
+                                {/* name inputs */}
+                                <PersonInputs eudgc={props.eudgc} onChange={setPerson} />
+
+                                <hr />
+
+                                {/* combobox disease */}
+                                <FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
+                                    value={disease}
+                                    onChange={(evt: any) => setDisease(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
+                                />
+
+                                <hr />
+
+                                {/* Date of First Positive Test Result  */}
+                                <Form.Group as={Row} controlId='formLastDateInput' className='pb-3 mb-0'>
+                                    <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:first-positive-test-date') + '*'}</Form.Label>
+
+                                    <Col xs='7' sm='9' className='d-flex'>
+                                        <DatePicker
+                                            selected={firstPositiveResultDate}
+                                            onChange={handleFirstPositiveResultDate}
+                                            dateFormat='yyyy-MM-dd'
+                                            isClearable
+                                            placeholderText={t('translation:first-positive-test-date')}
+                                            className='qt-input form-control'
+                                            wrapperClassName='align-self-center'
+                                            showMonthDropdown
+                                            showYearDropdown
+                                            dropdownMode="select"
+                                            maxDate={dateValidFrom ? new Date(dateValidFrom.getTime() - timeAfter) : firstPosMaxDate}
+                                            minDate={dateValidTo ? new Date(dateValidTo.getTime() - expirationMilSeconds) : firstPosMinDate}
+                                            openToDate={firstPositiveResultDate
+                                                ? firstPositiveResultDate
+                                                : dateValidFrom
+                                                    ? new Date(dateValidFrom.getTime() - timeAfter)
+                                                    : new Date()}
+                                            required
+                                        />
+                                    </Col>
+                                </Form.Group>
+
+                                {/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
+                                <FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:recovery-country')}
+                                    value={testCountryCode}
+                                    onChange={(evt: any) => setTestCountryCode(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.CountryCodes]}
+                                />
+
+                                <hr />
+
+                                {/* certificateIssuer */}
+                                <FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')} placeholder={t('translation:certificateIssuer')}
+                                    value={certificateIssuer}
+                                    onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
+                                    required
+                                    maxLength={80}
+                                />
+
+                                {/* Date: Certificate Valid From - To */}
+                                <Form.Group as={Row} controlId='formDateValidFromToInput' className='pb-3 mb-0'>
+                                    <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:cert-valid-from-to') + '*'}</Form.Label>
+
+                                    <Col xs='7' sm='9' className='d-flex'>
+                                        <DatePicker
+                                            selected={dateValidFrom}
+                                            onChange={handleDateValidFrom}
+                                            dateFormat='yyyy-MM-dd'
+                                            isClearable
+                                            placeholderText={t('translation:valid-from')}
+                                            className='qt-input form-control'
+                                            wrapperClassName='align-self-center'
+                                            showMonthDropdown
+                                            showYearDropdown
+                                            dropdownMode="select"
+                                            maxDate={new Date()}
+                                            minDate={firstPositiveResultDate
+                                                ? new Date(firstPositiveResultDate.getTime() + timeAfter)
+                                                : dateValidTo
+                                                    ? new Date(dateValidTo.getTime() + timeAfter - expirationMilSeconds)
+                                                    : new Date(Date.now() + timeAfter - expirationMilSeconds)}
+                                            openToDate={dateValidFrom ? dateValidFrom : new Date()}
+                                            required
+                                        />
+                                        <span className='space-five'>{'-'}</span>
+                                        <DatePicker
+                                            selected={dateValidTo}
+                                            onChange={handleDateValidTo}
+                                            dateFormat='yyyy-MM-dd'
+                                            isClearable
+                                            placeholderText={t('translation:valid-to')}
+                                            className='qt-input form-control'
+                                            wrapperClassName='align-self-center'
+                                            showMonthDropdown
+                                            showYearDropdown
+                                            dropdownMode="select"
+                                            maxDate={firstPositiveResultDate
+                                                ? new Date(firstPositiveResultDate.getTime() + expirationMilSeconds)
+                                                : dateValidFrom
+                                                    ? new Date(dateValidFrom.getTime() - timeAfter + expirationMilSeconds)
+                                                    : new Date(Date.now() - timeAfter + expirationMilSeconds)}
+                                            minDate={new Date()}
+                                            openToDate={dateValidTo ? dateValidTo : new Date()}
+                                            required
+                                        />
+                                    </Col>
+                                </Form.Group>
+
+                            </Card.Body>
+
+                            {/*
                             footer with clear and nex button
                         */}
-                        <CardFooter handleCancel={handleCancel} />
+                            <CardFooter handleCancel={handleCancel} />
 
-                    </Form>
-                </Card>
+                        </Form>
+                    </Card>
+                </Fade>
             </>
     )
 }
diff --git a/src/components/record-test-cert-data.component.tsx b/src/components/record-test-cert-data.component.tsx
index acd8b83..6b3a1d5 100644
--- a/src/components/record-test-cert-data.component.tsx
+++ b/src/components/record-test-cert-data.component.tsx
@@ -20,7 +20,7 @@
  */
 
 import React from 'react';
-import { Card, Col, Form, Row } from 'react-bootstrap';
+import { Card, Col, Fade, Form, Row } from 'react-bootstrap';
 
 import '../i18n';
 import { useTranslation } from 'react-i18next';
@@ -176,124 +176,125 @@ const RecordTestCertData = (props: any) => {
     return (
         !(isInit && context && context.valueSets) ? <Spinner /> :
             <>
-                <Card id='data-card'>
+                <Fade appear={true} in={true} >
+                    <Card id='data-card'>
 
-                    <Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
+                        <Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
 
-                        {/*
+                            {/*
                             header with title and id card query
                         */}
-                        <CardHeader title={t('translation:test-cert')} />
+                            <CardHeader title={t('translation:test-cert')} />
 
-                        {/*
+                            {/*
                             content area with patient inputs and check box
                         */}
-                        <Card.Body id='data-body' className='p-3'>
-
-                            <PersonInputs eudgc={props.eudgc} onChange={setPerson} />
-
-                            <hr />
-
-                            {/* combobox disease */}
-                            <FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
-                                value={disease}
-                                onChange={(evt: any) => setDisease(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
-                            />
-
-                            {/* testType input */}
-                            <FormGroupValueSetSelect controlId='formTestTypeInput' title={t('translation:testType')}
-                                value={testType}
-                                onChange={(evt: any) => setTestType(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.TestType]}
-                            />
-
-                            {/* testName input */}
-                            <FormGroupInput controlId='formTestNameInput' title={t('translation:testName')}
-                                value={testName}
-                                onChange={(evt: any) => setTestName(evt.target.value)}
-                                hidden={testType !== 'LP6464-4'}
-                                maxLength={80}
-                            />
-
-                            {/* combobox testManufacturers */}
-                            <FormGroupValueSetSelect controlId='formTestManufactorersInput' title={t('translation:testManufacturers')}
-                                value={testManufacturers}
-                                onChange={(evt: any) => setTestManufacturers(evt.target.value)}
-                                hidden={testType !== 'LP217198-3'}
-                                valueSet={context.valueSets[Value_Sets.TestManufacturer]}
-                            />
-
-                            <hr />
-
-                            {/* sampleDateTime */}
-                            <Form.Group as={Row} controlId='formSampleDateTimeInput' className='pb-3 mb-0'>
-                                <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:sampleDateTime') + '*'}</Form.Label>
-
-                                <Col xs='7' sm='9' className='d-flex'>
-                                    <DatePicker
-                                        selected={sampleDateTime}
-                                        onChange={handleSampleDateTimeChange}
-                                        dateFormat={utils.pickerDateTimeFormat}
-                                        placeholderText={t('translation:sampleDateTime')}
-                                        className='qt-input form-control'
-                                        wrapperClassName='align-self-center'
-                                        showMonthDropdown
-                                        showYearDropdown
-                                        showTimeSelect
-                                        dropdownMode="select"
-                                        minDate={new Date(2020, 10)}
-                                        openToDate={new Date()}
-                                        required
-                                    />
-                                </Col>
-                            </Form.Group>
-
-                            {/* combobox testResult */}
-                            <FormGroupValueSetSelect controlId='formTestResultInput' title={t('translation:testResult')}
-                                value={testResult}
-                                onChange={(evt: any) => setTestResult(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.TestResult]}
-                            />
-
-                            {/* testCenter input */}
-                            <FormGroupInput controlId='formTestCenterInput' title={t('translation:testCenter')}
-                                value={testCenter}
-                                onChange={(evt: any) => setTestCenter(evt.target.value)}
-                                required
-                                maxLength={80}
-                            />
-
-                            <hr />
-
-                            {/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
-                            <FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:vac-country')}
-                                value={issuerCountryCode}
-                                onChange={(evt: any) => setIssuerCountryCode(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.CountryCodes]}
-                            />
-
-                            {/* certificateIssuer */}
-                            <FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')} placeholder={t('translation:certificateIssuer')}
-                                value={certificateIssuer}
-                                onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
-                                required
-                                maxLength={80}
-                            />
-                            <hr />
-                        </Card.Body>
-
-                        {/*
+                            <Card.Body id='data-body'>
+
+                                <PersonInputs eudgc={props.eudgc} onChange={setPerson} />
+
+                                <hr />
+
+                                {/* combobox disease */}
+                                <FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
+                                    value={disease}
+                                    onChange={(evt: any) => setDisease(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
+                                />
+
+                                {/* testType input */}
+                                <FormGroupValueSetSelect controlId='formTestTypeInput' title={t('translation:testType')}
+                                    value={testType}
+                                    onChange={(evt: any) => setTestType(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.TestType]}
+                                />
+
+                                {/* testName input */}
+                                <FormGroupInput controlId='formTestNameInput' title={t('translation:testName')}
+                                    value={testName}
+                                    onChange={(evt: any) => setTestName(evt.target.value)}
+                                    hidden={testType !== 'LP6464-4'}
+                                    maxLength={80}
+                                />
+
+                                {/* combobox testManufacturers */}
+                                <FormGroupValueSetSelect controlId='formTestManufactorersInput' title={t('translation:testManufacturers')}
+                                    value={testManufacturers}
+                                    onChange={(evt: any) => setTestManufacturers(evt.target.value)}
+                                    hidden={testType !== 'LP217198-3'}
+                                    valueSet={context.valueSets[Value_Sets.TestManufacturer]}
+                                />
+
+                                <hr />
+
+                                {/* sampleDateTime */}
+                                <Form.Group as={Row} controlId='formSampleDateTimeInput' className='pb-3 mb-0'>
+                                    <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:sampleDateTime') + '*'}</Form.Label>
+
+                                    <Col xs='7' sm='9' className='d-flex'>
+                                        <DatePicker
+                                            selected={sampleDateTime}
+                                            onChange={handleSampleDateTimeChange}
+                                            dateFormat={utils.pickerDateTimeFormat}
+                                            placeholderText={t('translation:sampleDateTime')}
+                                            className='qt-input form-control'
+                                            wrapperClassName='align-self-center'
+                                            showMonthDropdown
+                                            showYearDropdown
+                                            showTimeSelect
+                                            dropdownMode="select"
+                                            minDate={new Date(2020, 10)}
+                                            openToDate={new Date()}
+                                            required
+                                        />
+                                    </Col>
+                                </Form.Group>
+
+                                {/* combobox testResult */}
+                                <FormGroupValueSetSelect controlId='formTestResultInput' title={t('translation:testResult')}
+                                    value={testResult}
+                                    onChange={(evt: any) => setTestResult(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.TestResult]}
+                                />
+
+                                {/* testCenter input */}
+                                <FormGroupInput controlId='formTestCenterInput' title={t('translation:testCenter')}
+                                    value={testCenter}
+                                    onChange={(evt: any) => setTestCenter(evt.target.value)}
+                                    required
+                                    maxLength={80}
+                                />
+
+                                <hr />
+
+                                {/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
+                                <FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:vac-country')}
+                                    value={issuerCountryCode}
+                                    onChange={(evt: any) => setIssuerCountryCode(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.CountryCodes]}
+                                />
+
+                                {/* certificateIssuer */}
+                                <FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')} placeholder={t('translation:certificateIssuer')}
+                                    value={certificateIssuer}
+                                    onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
+                                    required
+                                    maxLength={80}
+                                />
+                            </Card.Body>
+
+                            {/*
                             footer with clear and nex button
                         */}
-                        <CardFooter handleCancel={handleCancel} />
+                            <CardFooter handleCancel={handleCancel} />
 
-                    </Form>
-                </Card>
+                        </Form>
+                    </Card>
+                </Fade>
             </>
     )
 }
diff --git a/src/components/record-vaccination-cert-data.component.tsx b/src/components/record-vaccination-cert-data.component.tsx
index b25650c..2a7f86c 100644
--- a/src/components/record-vaccination-cert-data.component.tsx
+++ b/src/components/record-vaccination-cert-data.component.tsx
@@ -20,7 +20,7 @@
  */
 
 import React from 'react';
-import { Card, Col, Form, Row } from 'react-bootstrap';
+import { Card, Col, Fade, Form, Row } from 'react-bootstrap';
 
 import '../i18n';
 import { useTranslation } from 'react-i18next';
@@ -175,125 +175,126 @@ const RecordVaccinationCertData = (props: any) => {
     return (
         !(isInit && context && context.valueSets) ? <Spinner /> :
             <>
-                <Card id='data-card'>
+                <Fade appear={true} in={true} >
+                    <Card id='data-card'>
 
-                    <Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
+                        <Form className='form-flex' onSubmit={handleSubmit} /*validated={validated}*/>
 
-                        {/*
+                            {/*
                             header with title and id card query
                         */}
-                        <CardHeader title={t('translation:vaccination-cert')} />
+                            <CardHeader title={t('translation:vaccination-cert')} />
 
-                        {/*
+                            {/*
                             content area with patient inputs and check box
                         */}
-                        <Card.Body id='data-body' className='p-3'>
-
-                            {/* name inputs */}
-                            <PersonInputs eudgc={props.eudgc} onChange={setPerson} />
-
-                            <hr />
-
-                            {/* combobox disease */}
-                            <FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
-                                value={disease}
-                                onChange={(evt: any) => setDisease(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
-                            />
-
-                            {/* combobox vaccine */}
-                            <FormGroupValueSetSelect controlId='formVaccineInput' title={t('translation:vaccine')}
-                                value={vaccine}
-                                onChange={(evt: any) => setVaccine(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.VaccineType]}
-                            />
-
-                            {/* combobox medicalProduct */}
-                            <FormGroupValueSetSelect controlId='formMedicalProductInput' title={t('translation:vac-medical-product')}
-                                value={medicalProduct}
-                                onChange={(evt: any) => setMedicalProduct(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.Vaccines]}
-                            />
-
-                            {/* combobox marketingHolder */}
-                            <FormGroupValueSetSelect controlId='formMarketingHolderInput' title={t('translation:vac-marketing-holder')}
-                                value={marketingHolder}
-                                onChange={(evt: any) => setMarketingHolder(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.VaccinesManufacturer]}
-                            />
-
-                            <hr />
-
-                            {/* sequence */}
-                            <FormGroupInput controlId='formDoseNumberInput' title={t('translation:sequence')} placeholder={t('translation:def-sequence')}
-                                value={doseNumber}
-                                onChange={(evt: any) => handleNumber(evt.target.value, setDoseNumber)}
-                                required min={1} max={9} maxLength={1}
-                                type='number'
-                            />
-
-                            {/* tot */}
-                            <FormGroupInput controlId='formTotInput' title={t('translation:tot')} placeholder={t('translation:def-tot')}
-                                value={totalDoseNumber}
-                                onChange={(evt: any) => handleNumber(evt.target.value, setTotalDoseNumber)}
-                                required min={1} max={9} maxLength={1}
-                                type='number'
-                            />
-
-                            {/* vacLastDate */}
-                            <Form.Group as={Row} controlId='formLastDateInput' className='pb-3 mb-0'>
-                                <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:vac-last-date') + '*'}</Form.Label>
-
-                                <Col xs='7' sm='9' className='d-flex'>
-                                    <DatePicker
-                                        selected={vacLastDate}
-                                        onChange={handleVacLastDate}
-                                        dateFormat='yyyy-MM-dd'
-                                        isClearable
-                                        placeholderText={t('translation:vac-last-date')}
-                                        className='qt-input form-control'
-                                        wrapperClassName='align-self-center'
-                                        showMonthDropdown
-                                        showYearDropdown
-                                        dropdownMode="select"
-                                        minDate={new Date(2020, 10)}
-                                        openToDate={new Date()}
-                                        required
-                                    />
-                                </Col>
-                            </Form.Group>
-
-                            <hr />
-
-                            {/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
-                            <FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:vac-country')}
-                                value={issuerCountryCode}
-                                onChange={(evt: any) => setIssuerCountryCode(evt.target.value)}
-                                required
-                                valueSet={context.valueSets[Value_Sets.CountryCodes]}
-                            />
-
-                            {/* certificateIssuer */}
-                            <FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')}
-                                value={certificateIssuer}
-                                onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
-                                required
-                                maxLength={80}
-                            />
-                            <hr />
-                        </Card.Body>
-
-                        {/*
+                            <Card.Body id='data-body'>
+
+                                {/* name inputs */}
+                                <PersonInputs eudgc={props.eudgc} onChange={setPerson} />
+
+                                <hr />
+
+                                {/* combobox disease */}
+                                <FormGroupValueSetSelect controlId='formDiseaseInput' title={t('translation:disease-agent')} placeholder={t('translation:def-disease-agent')}
+                                    value={disease}
+                                    onChange={(evt: any) => setDisease(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.DiseaseAgent]}
+                                />
+
+                                {/* combobox vaccine */}
+                                <FormGroupValueSetSelect controlId='formVaccineInput' title={t('translation:vaccine')}
+                                    value={vaccine}
+                                    onChange={(evt: any) => setVaccine(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.VaccineType]}
+                                />
+
+                                {/* combobox medicalProduct */}
+                                <FormGroupValueSetSelect controlId='formMedicalProductInput' title={t('translation:vac-medical-product')}
+                                    value={medicalProduct}
+                                    onChange={(evt: any) => setMedicalProduct(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.Vaccines]}
+                                />
+
+                                {/* combobox marketingHolder */}
+                                <FormGroupValueSetSelect controlId='formMarketingHolderInput' title={t('translation:vac-marketing-holder')}
+                                    value={marketingHolder}
+                                    onChange={(evt: any) => setMarketingHolder(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.VaccinesManufacturer]}
+                                />
+
+                                <hr />
+
+                                {/* sequence */}
+                                <FormGroupInput controlId='formDoseNumberInput' title={t('translation:sequence')} placeholder={t('translation:def-sequence')}
+                                    value={doseNumber}
+                                    onChange={(evt: any) => handleNumber(evt.target.value, setDoseNumber)}
+                                    required min={1} max={9} maxLength={1}
+                                    type='number'
+                                />
+
+                                {/* tot */}
+                                <FormGroupInput controlId='formTotInput' title={t('translation:tot')} placeholder={t('translation:def-tot')}
+                                    value={totalDoseNumber}
+                                    onChange={(evt: any) => handleNumber(evt.target.value, setTotalDoseNumber)}
+                                    required min={1} max={9} maxLength={1}
+                                    type='number'
+                                />
+
+                                {/* vacLastDate */}
+                                <Form.Group as={Row} controlId='formLastDateInput' className='pb-3 mb-0'>
+                                    <Form.Label className='input-label ' column xs='5' sm='3'>{t('translation:vac-last-date') + '*'}</Form.Label>
+
+                                    <Col xs='7' sm='9' className='d-flex'>
+                                        <DatePicker
+                                            selected={vacLastDate}
+                                            onChange={handleVacLastDate}
+                                            dateFormat='yyyy-MM-dd'
+                                            isClearable
+                                            placeholderText={t('translation:vac-last-date')}
+                                            className='qt-input form-control'
+                                            wrapperClassName='align-self-center'
+                                            showMonthDropdown
+                                            showYearDropdown
+                                            dropdownMode="select"
+                                            minDate={new Date(2020, 10)}
+                                            openToDate={new Date()}
+                                            required
+                                        />
+                                    </Col>
+                                </Form.Group>
+
+                                <hr />
+
+                                {/* Combobox for the vaccin countries in iso-3166-1-alpha-2 */}
+                                <FormGroupValueSetSelect controlId='formVacCountryInput' title={t('translation:vac-country')}
+                                    value={issuerCountryCode}
+                                    onChange={(evt: any) => setIssuerCountryCode(evt.target.value)}
+                                    required
+                                    valueSet={context.valueSets[Value_Sets.CountryCodes]}
+                                />
+
+                                {/* certificateIssuer */}
+                                <FormGroupInput controlId='formcertificateIssuerInput' title={t('translation:certificateIssuer')}
+                                    value={certificateIssuer}
+                                    onChange={(evt: any) => setCertificateIssuer(evt.target.value)}
+                                    required
+                                    maxLength={80}
+                                />
+                            </Card.Body>
+
+                            {/*
                             footer with clear and nex button
                         */}
-                        <CardFooter handleCancel={handleCancel} />
+                            <CardFooter handleCancel={handleCancel} />
 
-                    </Form>
-                </Card>
+                        </Form>
+                    </Card>
+                </Fade>
             </>
     )
 }
diff --git a/src/components/show-certificate.component.tsx b/src/components/show-certificate.component.tsx
index d8e0ee4..df83866 100644
--- a/src/components/show-certificate.component.tsx
+++ b/src/components/show-certificate.component.tsx
@@ -20,7 +20,7 @@
  */
 
 import React from 'react';
-import { Button, Card, Col, Container, Row } from 'react-bootstrap'
+import { Button, Card, Col, Container, Fade, Row } from 'react-bootstrap'
 
 import '../i18n';
 import { useTranslation } from 'react-i18next';
@@ -146,81 +146,83 @@ const ShowCertificate = (props: any) => {
     return (
         !(isInit && context.valueSets && eudgc && qrCodeValue) ? <Spinner /> :
             <>
-                <Card id='data-card'>
-                    {/*    content area with patient inputs and check box    */}
-                    <Card.Header id='data-header' className='p-3'>
-                        <Row>
-                            <Col md='6' className='pl-0'>
-                                <Card.Title className='m-md-0 tac-xs-tal-md jcc-xs-jcfs-md' as={'h3'} >{t('translation:your-certificate')}</Card.Title>
-                            </Col>
-                        </Row>
-                    </Card.Header>
-                    <Card.Body id='data-body' className='p-3'>
-                        <Row>
-                            <Col sm='6' className='p-3'>
-
-                                <ShowCertificateData eudgc={eudgc} valueSetList={context.valueSets} />
-
-                            </Col>
-                            <Col sm='6' className='p-3'>
-                                <Container id='qr-code-container'>
-                                    {qrCodeValue ? <><QRCode id='qr-code' size={256} renderAs='svg' value={qrCodeValue} />
-                                        {/* <Card.Text className='input-label' >{qrCodeValue}</Card.Text> */}
-                                    </> : <></>}
-                                </Container>
-                                <Container id='qr-code-container' className='hidden'>
-                                    {qrCodeValue ? <> <QRCode id='qr-code-pdf' size={256} renderAs='canvas' value={qrCodeValue} />
-                                    </> : <></>}
-                                </Container>
-                                <Card.Text className='input-label jcc-xs-sm m-3 text-center' >TAN: {tan}</Card.Text>
-                            </Col>
-                        </Row>
-                    </Card.Body>
-
-                    {/*    footer with correction and finish button    */}
-                    <Card.Footer id='data-footer'>
-                        <Row>
-                            <Col xs='12' md='4' className='pl-md-0 pr-md-2 pb-3 pb-md-0'>
-                                <Button
-                                    className=''
-                                    variant='outline-primary'
-                                    block
-                                    onClick={handleBack}
-                                >
-                                    {t('translation:patient-data-correction')}
-                                </Button>
-                            </Col>
-                            <Col xs='6' md='4' className='px-md-2 pr-2'>
-                                <Button
-                                    className=''
-                                    block
-                                    onClick={handleGeneratePdf}
-                                    disabled={!pdfIsInit}
-                                    hidden={pdfIsReady}
-                                >
-                                    {t('translation:generate-pdf')}
-                                </Button>
-                                <Button
-                                    className='m-0'
-                                    block
-                                    onClick={handleShowPdf}
-                                    hidden={!pdfIsReady}
-                                >
-                                    {t('translation:show-pdf')}
-                                </Button>
-                            </Col>
-                            <Col xs='6' md='4' className='pr-md-0 pl-2'>
-                                <Button
-                                    className=''
-                                    block
-                                    onClick={finishProcess}
-                                >
-                                    {t('translation:process-finish')}
-                                </Button>
-                            </Col>
-                        </Row>
-                    </Card.Footer>
-                </Card>
+                <Fade appear={true} in={true} >
+                    <Card id='data-card'>
+                        {/*    content area with patient inputs and check box    */}
+                        <Card.Header id='data-header' className='p-3'>
+                            <Row>
+                                <Col md='6' className='pl-0'>
+                                    <Card.Title className='m-md-0 tac-xs-tal-md jcc-xs-jcfs-md' as={'h3'} >{t('translation:your-certificate')}</Card.Title>
+                                </Col>
+                            </Row>
+                        </Card.Header>
+                        <Card.Body id='data-body'>
+                            <Row>
+                                <Col sm='6' className='p-3'>
+
+                                    <ShowCertificateData eudgc={eudgc} valueSetList={context.valueSets} />
+
+                                </Col>
+                                <Col sm='6' className='p-3'>
+                                    <Container id='qr-code-container'>
+                                        {qrCodeValue ? <><QRCode id='qr-code' size={256} renderAs='svg' value={qrCodeValue} />
+                                            {/* <Card.Text className='input-label' >{qrCodeValue}</Card.Text> */}
+                                        </> : <></>}
+                                    </Container>
+                                    <Container id='qr-code-container' className='hidden'>
+                                        {qrCodeValue ? <> <QRCode id='qr-code-pdf' size={256} renderAs='canvas' value={qrCodeValue} />
+                                        </> : <></>}
+                                    </Container>
+                                    <Card.Text className='input-label jcc-xs-sm m-3 text-center' >TAN: {tan}</Card.Text>
+                                </Col>
+                            </Row>
+                        </Card.Body>
+
+                        {/*    footer with correction and finish button    */}
+                        <Card.Footer id='data-footer'>
+                            <Row>
+                                <Col xs='12' md='4' className='pl-md-0 pr-md-2 pb-3 pb-md-0'>
+                                    <Button
+                                        className=''
+                                        variant='outline-primary'
+                                        block
+                                        onClick={handleBack}
+                                    >
+                                        {t('translation:patient-data-correction')}
+                                    </Button>
+                                </Col>
+                                <Col xs='6' md='4' className='px-md-2 pr-2'>
+                                    <Button
+                                        className=''
+                                        block
+                                        onClick={handleGeneratePdf}
+                                        disabled={!pdfIsInit}
+                                        hidden={pdfIsReady}
+                                    >
+                                        {t('translation:generate-pdf')}
+                                    </Button>
+                                    <Button
+                                        className='m-0'
+                                        block
+                                        onClick={handleShowPdf}
+                                        hidden={!pdfIsReady}
+                                    >
+                                        {t('translation:show-pdf')}
+                                    </Button>
+                                </Col>
+                                <Col xs='6' md='4' className='pr-md-0 pl-2'>
+                                    <Button
+                                        className=''
+                                        block
+                                        onClick={finishProcess}
+                                    >
+                                        {t('translation:process-finish')}
+                                    </Button>
+                                </Col>
+                            </Row>
+                        </Card.Footer>
+                    </Card>
+                </Fade>
             </>
 
     )
diff --git a/src/misc/useValueSet.tsx b/src/misc/useValueSet.tsx
index d610436..b498c0f 100644
--- a/src/misc/useValueSet.tsx
+++ b/src/misc/useValueSet.tsx
@@ -84,6 +84,7 @@ export const useGetValueSets = (onInit?: (isInit: boolean) => void, onError?: (m
     const [valueSetHashList, setValueSetHashList] = React.useState<IValueSetHashListItem[]>();
 
     const [valueSetList] = React.useState<IValueSetList>({});
+    const [result, setResult] = React.useState<IValueSetList>();
     const [isInit, setIsInit] = React.useState<boolean>(false);
 
     // on mount load hash list
@@ -122,6 +123,10 @@ export const useGetValueSets = (onInit?: (isInit: boolean) => void, onError?: (m
         if (onInit) {
             onInit(isInit);
         }
+        if (isInit) {
+            setResult(valueSetList);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isInit, onInit])
 
     const setValueSet = (hashListItem: IValueSetHashListItem) => {
@@ -145,11 +150,10 @@ export const useGetValueSets = (onInit?: (isInit: boolean) => void, onError?: (m
         }
         else {
             console.log('no valid valueset hash');
-
         }
     }
 
-    return valueSetList;
+    return result;
 }
 
 // ValueSetList
diff --git a/src/routing.component.tsx b/src/routing.component.tsx
index d9d31b6..84f3f8d 100644
--- a/src/routing.component.tsx
+++ b/src/routing.component.tsx
@@ -56,6 +56,7 @@ const Routing = () => {
     const [errorShow, setErrorShow] = React.useState(false);
     const [dataPrivacyShow, setDataPrivacyShow] = React.useState(false);
     const [imprintShow, setImprintShow] = React.useState(false);
+    const [isInit, setIsInit] = React.useState(false);
 
     const context: IAppContext = {
         navigation: useNavigation(),
@@ -77,7 +78,12 @@ const Routing = () => {
         }
     }, [errorShow])
 
-    return (!(context.valueSets && context.navigation) ? <Spinner background='#cfcfcf' /> :
+    React.useEffect(() => {
+        if (context.valueSets && Object.entries(context.valueSets).length > 0 && context.navigation)
+            setIsInit(true);
+    }, [context.navigation, context.valueSets])
+
+    return (!(isInit && context.valueSets && context.navigation) ? <Spinner background='#cfcfcf' /> :
         <>
             <AppContext.Provider value={context}>
                 {/*