diff --git a/README.md b/README.md
index 82969b1..0a0eec7 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ add them to your webpage and voilà!
### 1. Cherry Pick (Under development)
-Quick and easy.
+**Quick and easy**
Within your HTML file, add a doge component and start using it.
```
@@ -18,9 +18,15 @@ Within your HTML file, add a doge component and start using it.
```
+**Optionally**, add the initial.css stylesheet to the head of your page to prevent/reduce FOUC (flash of unstyled content).
+
+```
+.js
for file in $JS_FILES
do
filename=$(basename "$file")
@@ -15,6 +17,16 @@ do
cp "$file" "dist/$filename"
done
+# For each css file, concatinate and create a single file
+# for component consumers to include within the
+# of their webpage, to reduce flash of unstyled content.
+for file in $CSS_FILES
+do
+ echo "File: $file"
+ cat "$file" >> "dist/initial.css"
+ echo >> "dist/initial.css" #Adds line
+done
+
# Write CNAME file
echo "fetch.dogecoin.org" > dist/CNAME
echo "fetch.dogecoin.org" > CNAME
diff --git a/package.json b/package.json
index 0bb49bb..8da7ce7 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
"license": "ISC",
"scripts": {
"dev": "web-dev-server --open example/ --node-resolve --watch",
- "test": "web-test-runner \"src/**/*.test.html\" --node-resolve --playwright --browsers firefox",
- "test:watch": "web-test-runner src/**/*.test.html --node-resolve --watch",
+ "test": "web-test-runner \"src/**/test.html\" --node-resolve --playwright --browsers firefox",
+ "test:watch": "web-test-runner src/**/test.html --node-resolve --watch",
"prepare": "husky"
},
"devDependencies": {
diff --git a/src/components/navigation/doge-nav.js b/src/components/doge-nav/doge-nav.js
similarity index 100%
rename from src/components/navigation/doge-nav.js
rename to src/components/doge-nav/doge-nav.js
diff --git a/src/components/doge-nav/initial.css b/src/components/doge-nav/initial.css
new file mode 100644
index 0000000..bca989c
--- /dev/null
+++ b/src/components/doge-nav/initial.css
@@ -0,0 +1,6 @@
+doge-nav:not(:defined) {
+ display: block;
+ height: 62px;
+ overflow: hidden;
+ opacity: 0;
+}
\ No newline at end of file
diff --git a/src/components/navigation/doge-nav.test.html b/src/components/doge-nav/test.html
similarity index 100%
rename from src/components/navigation/doge-nav.test.html
rename to src/components/doge-nav/test.html
diff --git a/src/components/doge-pal.js b/src/components/doge-pal/doge-pal.js
similarity index 97%
rename from src/components/doge-pal.js
rename to src/components/doge-pal/doge-pal.js
index 999cff7..ad05eef 100644
--- a/src/components/doge-pal.js
+++ b/src/components/doge-pal/doge-pal.js
@@ -2,7 +2,7 @@ import {
dogeComponentInit,
resourceBasePath,
LitElement, css, html, classMap
-} from "../lib/cherry.js"
+} from "../../lib/cherry.js"
export class DogePal extends LitElement {
static styles = css``;
diff --git a/src/components/doge-price.js b/src/components/doge-price/doge-price.js
similarity index 97%
rename from src/components/doge-price.js
rename to src/components/doge-price/doge-price.js
index 261994b..4d1b1d0 100644
--- a/src/components/doge-price.js
+++ b/src/components/doge-price/doge-price.js
@@ -2,7 +2,7 @@ import {
dogeComponentInit,
resourceBasePath,
LitElement, css, html, classMap
-} from "../lib/cherry.js"
+} from "../../lib/cherry.js"
export class DogePrice extends LitElement {
static styles = css``;
diff --git a/src/components/doge-qr.js b/src/components/doge-qr/doge-qr.js
similarity index 91%
rename from src/components/doge-qr.js
rename to src/components/doge-qr/doge-qr.js
index c0f8cdb..a5a0e56 100644
--- a/src/components/doge-qr.js
+++ b/src/components/doge-qr/doge-qr.js
@@ -2,8 +2,8 @@ import {
dogeComponentInit,
resourceBasePath,
LitElement, css, html, classMap
-} from "../lib/cherry.js"
-import "../../resources/blocks/qr-code-styling@1.5.0/qr-code-styling.js";
+} from "../../lib/cherry.js"
+import "../../../resources/blocks/qr-code-styling@1.5.0/qr-code-styling.js";
export class DogeQR extends LitElement {
static properties = {
diff --git a/src/components/doge-qr/initial.css b/src/components/doge-qr/initial.css
new file mode 100644
index 0000000..7d06c62
--- /dev/null
+++ b/src/components/doge-qr/initial.css
@@ -0,0 +1,6 @@
+doge-qr:not(:defined) {
+ display: inline-block;
+ width: 220px;
+ height: 220px;
+ opacity: 0;
+}
\ No newline at end of file
diff --git a/src/components/doge-qr.test.html b/src/components/doge-qr/test.html
similarity index 100%
rename from src/components/doge-qr.test.html
rename to src/components/doge-qr/test.html