fix of #8512

https://github.com/misskey-dev/misskey/pull/8512#issuecomment-1368553870

packages/frontend/src/pizzax.ts

@@ -23,8 +23,13 @@ export class Storage<T extends StateDef> {
 	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
 	public readonly state: { [K in keyof T]: T[K]['default'] };
 	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
+	public readonly ready: Promise<void>;
+	private markAsReady: () => void = () => {};
 
 	constructor(key: string, def: T) {
+		this.ready = new Promise((res) => {
+			this.markAsReady = res;
+		});
 		this.key = key;
 		this.keyForLocalStorage = 'pizzax::' + key;
 		this.def = def;
@@ -72,6 +77,7 @@ export class Storage<T extends StateDef> {
 						}
 					}
 					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+					this.markAsReady();
 				});
 			}, 1);
 			// streamingのuser storage updateイベントを監視して更新
@@ -87,6 +93,8 @@ export class Storage<T extends StateDef> {
 					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
 				}
 			});
+		} else {
+			this.markAsReady();
 		}
 	}
 

packages/frontend/src/ui/classic.vue

@@ -7,7 +7,7 @@
 			<XSidebar/>
 		</div>
 		<div v-else ref="widgetsLeft" class="widgets left">
-			<XWidgets place="left" @mounted="attachSticky(widgetsLeft)" :classic="true"/>
+			<XWidgets place="left" :classic="true" @mounted="attachSticky(widgetsLeft)"/>
 		</div>
 
 		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
@@ -17,7 +17,7 @@
 		</main>
 
 		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
-			<XWidgets :place="showMenuOnTop ? 'right' : null" @mounted="attachSticky(widgetsRight)" :classic="true"/>
+			<XWidgets :place="showMenuOnTop ? 'right' : null" :classic="true" @mounted="attachSticky(widgetsRight)"/>
 		</div>
 	</div>
 
@@ -129,18 +129,20 @@ if (window.innerWidth < 1024) {
 
 document.documentElement.style.overflowY = 'scroll';
 
-if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: null, data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: null, data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: null, data: {},
-	}]);
-}
+defaultStore.ready.then(() => {
+	if (defaultStore.state.widgets.length === 0) {
+		defaultStore.set('widgets', [{
+			name: 'calendar',
+			id: 'a', place: null, data: {},
+		}, {
+			name: 'notifications',
+			id: 'b', place: null, data: {},
+		}, {
+			name: 'trends',
+			id: 'c', place: null, data: {},
+		}]);
+	}
+});
 
 onMounted(() => {
 	window.addEventListener('resize', () => {

packages/frontend/src/ui/universal.vue

@@ -113,18 +113,20 @@ mainRouter.on('change', () => {
 
 document.documentElement.style.overflowY = 'scroll';
 
-if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: 'right', data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: 'right', data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: 'right', data: {},
-	}]);
-}
+defaultStore.ready.then(() => {
+	if (defaultStore.state.widgets.length === 0) {
+		defaultStore.set('widgets', [{
+			name: 'calendar',
+			id: 'a', place: 'right', data: {},
+		}, {
+			name: 'notifications',
+			id: 'b', place: 'right', data: {},
+		}, {
+			name: 'trends',
+			id: 'c', place: 'right', data: {},
+		}]);
+	}
+});
 
 onMounted(() => {
 	if (!isDesktop.value) {